Angular Front End Developer Training Course

Angular Front End Developer

This course will guide you from the basics of the framework such as Forms, Pipes, and CSS Styling to the more complex fundamentals of Routing, Directives, along with exercises on how to build end-to-end, working applications.

Course Overivew

  • Angular is a JavaScript-based framework that is used to create web applications, desktop, and mobile applications, which is completely written on Typescript which is developed by Microsoft.
  • Angular is highly popular, productive, packed with a lively community, very well documented, and produces blazing-fast apps that can run on various platforms.
  • Angular is widely popular for creating dynamic apps and its data binding and dependency injection features significantly reduce the amount of code that needs to be written.
  • It is being used extensively by developers for building web, desktop, and mobile applications.
  • This course will guide you from the basics of the framework such as Forms, Pipes, and CSS Styling to the more complex fundamentals of Routing, Directives, along with exercises on how to build end-to-end, working applications.
  • Through our hands on, practical approach, you will get working knowledge of developing Single Page Apps and creating highly responsive and interactive web pages.
Read More
Read Less
Course Benefits:

Module 1: Introducing Angular

  • What is Angular?
  • Central Features of the Angular Framework
  • Appropriate Use Cases
  • Building Blocks of an Angular Application
  • Basic Architecture of an Angular Application
  • Installing and Using Angular
  • Anatomy of an Angular Application
  • Running the Application

 

Module 2: Introduction to TypeScript

  • TypeScript Syntax
  • Programming Editors
  • The Type System – Defining Variables
  • The Type System – Defining Arrays
  • Type in Functions
  • Type Inference
  • Defining Classes
  • Class Methods
  • Class Constructors
  • Class Constructors – Alternate Form
  • Interfaces
  • Working with ES6 Modules
  • Visibility Control
  • var vs let
  • Arrow Functions
  • Arrow Function Compact Syntax
  • Arrow Function and Caller Context
  • Template Strings
  • Generics in Class
  • Generics in Class

 

Module 3: Components

  • What is a Component?
  • An Example Component
  • Creating a Component Using Angular CLI
  • The Component Class
  • The @Component Decorator
  • Registering a Component to Its Module
  • Component Template
  • Using a Component
  • Run the Application
  • Component Hierarchy
  • The Application Root Component
  • The Bootstrap File

 

Module 4: Component Templates

  • Templates
  • Template Location
  • The Mustache {{ }} Syntax
  • Setting DOM Element Properties
  • Event Binding
  • Expression Event Handler
  • Prevent Default Handling
  • Attribute Directives
  • Apply Styles by Changing CSS Classes
  • Example: ngClass
  • Applying Styles Directly
  • Structural Directives
  • Conditionally Execute Template
  • Example: ngIf
  • Looping Using ngFor
  • ngFor Local Variables
  • Manipulating the Collection
  • Example – Deleting an Item
  • Item Tracking with ngFor
  • Swapping Elements with ngSwitch
  • Template Reference Variable

 

Module 5: Inter Component Communication

  • Communication Basics
  • The Data Flow Architecture
  • Preparing the Child to Receive Data
  • Send Data from Parent
  • More About Setting Properties
  • Firing Event from a Component
  • Output () Example – Child Component
  • Output () Example – Parent Component
  • Full Two-Way Binding
  • Setting up Two Way Data Binding in Parent

 

Module 6: Template Driven Forms

  • Template Driven Forms
  • Importing Forms Module
  • Basic Approach
  • Setting Up a Form
  • Getting User Input
  • Omitting ngForm Attribute
  • Initialize the Form
  • Two Way Data Binding
  • Form Validation
  • Angular Validators
  • Displaying Validation State Using Classes
  • Additional Input Types
  • Checkboxes
  • Select (Drop Down) Fields
  • Rendering Options for Select (Drop Down)
  • Date fields
  • Radio Buttons

 

Module 7: Reactive Forms

  • Reactive Forms Overview
  • The Building Blocks
  • Import ReactiveFormsModule
  • Construct a Form
  • Design the Template
  • FormControl Constructor
  • Getting Form Values
  • Setting Form Values
  • The Synchronous Nature
  • Subscribing to Input Changes
  • Validation
  • Built-In Validators
  • Showing Validation Error
  • Custom Validator
  • Using a Custom Validator

 

Module 8: Services and Dependency Injection

  • What is a Service?
  • Creating a Basic Service
  • The Service Class
  • What is Dependency Injection?
  • Injecting a Service Instance
  • Injectors

 

Module 9: Pipes and Data Formatting

  • What are Pipes?
  • Built-In Pipes
  • Using Pipes in HTML Template
  • Chaining Pipes
  • The number Pipe
  • Currency Pipe
  • Create a Custom Pipe
  • Custom Pipe Example
  • Using Custom Pipes
  • Using a Pipe with ngFor
  • A Filter Pipe

 

Module 10: HTTP Client

  • The Angular HTTP Client
  • Using The HTTP Client – Overview
  • Importing HttpClientModule
  • Simple Example
  • Service Using HttpClient
  • ES6 Import Statements
  • Making a GET Request
  • What does an Observable Object do?
  • Using the Service in a Component
  • Error Handling
  • Customizing Error Object with. catch ()
  • Making a POST Request
  • Making a PUT Request
  • Making a DELETE Request

 

Module 11: The Angular Component Router

  • The Component Router
  • View Navigation
  • The Angular Router API
  • Creating a Router Enabled Application
  • Hosting the Routed Components
  • Navigation Using Links and Buttons
  • Programmatic Navigation
  • Passing Route Parameters
  • Navigating with Route Parameters
  • Obtaining the Route Parameter Values
  • Retrieving a Route Parameter
  • Routing Enabled Feature Module
  • Using the Feature Module
  • Lazy Loading the Feature Module
  • Creating Links for the Feature Module
  • Components
  • More About Lazy Loading
  • Preloading Modules
  • routerLinkActive binding
  • Default Route
  • Wildcard Route Path
  • redirectTo
  • Child Routes
  • Defining Child Routes
  • for Child Routes
  • Links for Child Routes
  • Navigation Guards
  • Creating Guard Implementations
  • Using Guards in a Route

 

Module 12: Advanced HTTP Client

  • Request Options
  • Returning an HttpResponse Object
  • Setting Request Headers
  • Creating New Observables
  • Creating a Simple Observable
  • The Observable.create() Method
  • Observable Operators
  • More About map
  • Piping Operators
  • The flatMap() Operator
  • The tap() Operator
  • The zip() Operator
  • Caching HTTP Response
  • Making Sequential HTTP Calls
  • Making Parallel Calls
  • Customizing Error Object with catchError ()

 

Module 13: Unit Testing Angular Applications

  • Unit Testing Angular Artifacts
  • Testing Tools
  • Typical Testing Steps
  • Test Results
  • Jasmine Test Suites
  • Jasmine Specs (Unit Tests)
  • Expectations (Assertions)
  • Matchers
  • Examples of Using Matchers
  • Using the not Property
  • Setup and Teardown in Unit Test Suites
  • Example of before Each and after Each Functions
  • Angular Test Module
  • Example Angular Test Module
  • Testing a Service
  • Injecting a Service Instance
  • Test a Synchronous Method
  • Test an Asynchronous Method
  • Using Mock HTTP Client
  • Supplying Canned Response
  • Testing a Component
  • Component Test Module
  • Creating a Component Instance
  • The Component Fixture Class
  • Basic Component Tests
  • The Debug Element Class
  • Angular CLI Auto-Completion.
  • Strictly Typed Forms.
  • Standalone Components.
  • Enhanced Template Diagnostics.
  • Streamlined Page Title Accessibility.
  • Optional Injectors.
  • Angular DevTools.
  • Anyone who is willing to build their own JavaScript based project
  • Anyone who wants to learn angular
Download
Course
Brochure

Prerequisites

This course is available at :

Classroom Training

Cairo
Giza
Onsite

Online Training

Virtual Interactive Instructor LED
Self-Paced Training

WHY CHOOSE CLS

Experience

We have been in the market since 1995, and we kept accumulating experience in the training business, and providing training for more than 100,000 trainees ever since, in Egypt, and the MENA region.

Premium Facilities

CLS facilities are well-equipped with strong hardware and software technologies that aid both students and trainers lead very effective smooth training programs.

Customer Support

We provide our clients with the best solutions, customized to their specific needs and goals. Our team is highly qualified to answer whatever questions you have.

Global Accredited

CLS is an authorized and accredited partner by technology leaders. This means that our training programs are of the highest quality source materials.

Up To Date

We keep tabs on every change in the market and the technology field, so our training programs will always be updated up to the World-class latest standards, and adapted to the global shape-shifting job market.

Certified Instructors

We select the best instructors, who are certified from trustworthy international vendors. They share their professional experience with the Trainees, so they can have a clear hands-on experience.

Over 200,000 Gradutes From CLS

Play Video
Amr Mostafa
An employee of the Security Department at the Ministry of Electricity

I`m attending now CEH Training with Eng Mohamed Hamdy ,CISSP Training with Eng Mohamed Gohar, I really learned a lot from him , everything here in CLS  is very satisfying including facilities .

Play Video
Lamiaa Medhat
CIO

We took a series of courses as the digital Transformation Unit of the ministry . we just finished CRISC Certification Training with DR Adel Abdel Meneim . Thank you CLS for all your efforts, we really appreciate it

Play Video
Ahmed Salah
Senior Cyber Security Engineer

Me and my colleagues are working in a government Organization, We took a no. of cyber security trainings with CLS starting with CEH and CISSP. we liked every thing the instructors, the stuff and whole environment

Play Video
Ferras Hassan
Head of the Programming Department at Bashayer Energy Company

I`m attending ASP.NET Core with MVC Training with Eng Mohamed Hesham , I really learned a lot from him , everything here in CLS  is very satisfying including facilities .Thanks you all team.

Play Video
Mohamed Ahmed Ali
Systems management specialist

Qualifying the cadres of digital transformation units in government agencies moving to the administrative capital .Thanks CLS

Play Video
Zeinab Salah
Software Developer at Bashayer Energy Company

I`m attending ASP.NET Core with MVC Training with Eng Mohamed Hesham , I really learned a lot from him , everything here in CLS  is very satisfying including facilities .Thanks you all team.

Play Video
Ibrahim Khalaf
IT Infrastructure and Security Manger

I`m attending now CRISC Training with DR Adel Abdel Meneim , I really learned a lot from him , everything here in CLS  is very satisfying including facilities , locations and the team.

Play Video
Samar Shams ElDin
Programmer at Bashayer Energy Company

I`m attending ASP.NET Core with MVC Training with Eng Mohamed Hesham , I really learned a lot from him , everything here in CLS  is very satisfying including facilities .Thanks you all team.

Student Application For

Angular Front End Developer
Full Name *
Email *
Phone *
Full Phone
Training Location *
Additional Request

Business Application For

Angular Front End Developer
Full Name *
Company Name *
Job Title *
Number of Employees
Email *
Phone *
Full Phone
Training Location *
Additional Request