Angular Basics

 Angular is a typescript based framework created by Google to create SPA(Single Page Applications).

SPA:- SPA stands for Single Page Application is a web application which loads single html page and dynamically updates the content without reloading or refreshing the page.

Component-Based Architecture:- 

In Angular everything revolves around components. Component-Based Architecture is a design pattern which is used to build Modular, Reusable and Self Contained Components.

Component:-

Component is a building block of an Angular application.

It consists of three parts-

1.) HTML Template- Includes the HTML file.

2.) Typescript File- Includes code and logic.

3.) CSS Styles- Includes styling.

Data Binding:- Data Binding in Angular connects the component data to the Angular UI.

There are some types/ways of Data Binding-

1.) Interpolation- ( {{}} ) One way Binding (Component to View)

2.) Property Binding- ( [] ) One way Binding (Component to View)

3.) Event Binding- ( () ) One way Binding (View to Component)

4.) Two Way Binding- ( [()] ) Sync Data (Component ↔ View)

Forms:- Forms are used for input data, Validate Data and form submission effectively.

There are two types of forms-

1.) Template Driven Forms- Simple, uses angular directives (ngModel) [uses FormsModule]

=> Uses directives like minlength and required

=> Angular provides in built directives using which we can perform validations. 

=> required, minlength, maxlength, pattern, email 

=> For checking validations- we have invalid, touched etc 

2.) Reactive Forms- More Powerful, uses FormGroup and FormControl [uses ReactiveFormsModule]

=> Uses typescript's validators

=> Example- 

userForm: FormGroup

constructor(private fb: FormBuilder)

{

    this.userForm = this.fb.group({

    name : ['', Validators.required],

   email: ['', [Validators.required, Validators.email]]

})

}