Angular Front End Developer

angular course will guide you from the basics of the framework such as Forms, Pipes, and CSS Styling to the more complex fundamentals of Routing and 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 Less

Course Benefits:

Course Outline

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

What you will learn

Audience profile

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 200,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.

Our Strategic Clients

Over 200,000 Gradutes From CLS

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.

Angular Front End Developer

Course Overivew

Prerequisites

This course is available at :

Classroom Training

Online Training

WHY CHOOSE CLS

Experience

Premium Facilities

Customer Support

Global Accredited

Up To Date

Certified Instructors

Our Strategic Clients

Over 200,000 Gradutes From CLS

Amr Mostafa

Lamiaa Medhat

Ahmed Salah

Ferras Hassan

Mohamed Ahmed Ali

Zeinab Salah

Ibrahim Khalaf

Samar Shams ElDin

Business Management →

IT Networks and ITSM →

Data Management →

Information Security →

Software Development →

Digital Transformation →

Graphic Design →

Engineering Design →

Quick links

Join Our News Letter

Student Application For

Business Application For