[new] Complete Angular 11 tutorial in one Article

Welcome to the Angular 11 Tutorial Course, specially designed for beginners and busy developers.

I create simple step-by-step tutorials which cover the version of Angular 2 to the latest Angular 11.

What is Angular?

Angular is a client-side TypeScript based framework which is used to create dynamic web applications.
It is very similar to its previous versions except having some extensive features.

Features and Advantages of Angular 11

-Support TypeScript
-Supports Web Workers
-Preview of Ivy available
-Lazy loading
-Improvement of ngUpgrade

Components

Components and services both are simply classes with decorators that mark their types and provide metadata which guide Angular to do things.

Every Angular application always has at least one component known as root component that connects a page hierarchy with page DOM. Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.

Modules

NgModules are different from other JavaScript modules. Every Angular app has a root module known as AppModule. It provides the bootstrap mechanism that launches the application.

Directives

directives can be classified in 3 categories based on how they behave:

-Component Directives
-Structural Directives
-Attribute Directives

Component Directives:

Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime.

Structural Directives:

Structural directives start with a * sign. These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf directive, *ngSwitch directive, and *ngFor directive.

*ngIf Directive:

The ngIf allows us to Add/Remove DOM Element.

*ngSwitch Directive:

The *ngSwitch allows us to Add/Remove DOM Element. It is similar to switch statement of C#.

*ngFor Directive:

The *ngFor directive is used to repeat a portion of HTML template once per each item from an iterable list (Collection).

Attribute Directives:

Attribute directives are used to change the look and behavior of the DOM elements. For example: ngClass directive, and ngStyle directive etc.

ngClass Directive:

The ngClass directive is used to add or remove CSS classes to an HTML element.

ngStyle Directive:

The ngStyle directive facilitates you to modify the style of an HTML element using the expression. You can also use ngStyle directive to dynamically change the style of your HTML element.

Data Binding

Data binding is the core concept of Angular and used to define the communication between a component and the DOM.
It is a technique to link your data to your view layer.

In simple words, you can say that data binding is a communication between your typescript code of your component and your template which user sees. It makes easy to define interactive applications without worrying about pushing and pulling data.

One-way databinding

One way databinding is a simple one way communication where HTML template is changed when we make changes in TypeScript code.

Two-way databinding

In two-way databinding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model, it will be reflected in the View and when you make changes in View, it will be reflected in Model.

Angular provides four types of data binding and they are different on the way of data flowing.

-String Interpolation
-Property Binding
-Event Binding
-Two-way binding

Forms

Angular forms are used to handle user's input. We can use Angular form in our application to enable users to log in, to update profile, to enter information, and to perform many other data-entry tasks.

-Reactive forms
-Template-driven forms

For deep reading about angular visit ✅ https://bhylu.com/angular/angular-11-tutorial-for-beginner-to-advance/

You looking for angular freelancer :)