This course is crafted to benefit absolutely any level of developer. We will start from scratch and learn how to create a development environment for Angular, Setup Angular CLI and learn all of the fhndamentals. We start by building a sandbox application to look at all of the main Angular concepts as well as building a logging application, then move to a much more advanced client management system with authentication and data storing with Firebase's new Firestore platform.
Session 1
1. What is angular?
2. Why angular?
3. Prerequisite software to run angular in local machine?
4. What is module?
5. What is component?
6. How angular loads our own html on browser?
Session 2
# how to add bootstrap?
run this command -> npm install --save bootstrap@3
add path in angular.json under styles array -> "node_modules/bootstrap/dist/css/bootstrap.min.css"
1. Global style - style.css
2. How to create components? With and without CLI
3. Data binding
- String interpolation - object / method/ expression
- Property binding - use []
- Event binding - use ()
Session 3
1. Different ways to access component - element, class, attribute
2. How to pass data in event binding ($event)
3. Directives (Predefined directive)
- *ngIf
- *ngFor
- ngClass
- ngStyle
Session 4
1.@Input() - To pass data from parent comp to child comp (Custom property binding)
2.@Output()- To pass data from child comp to parent (Custom event handling)
Session 5
1. Local Reference (using #) - use it instead of using unnecessary 2 way binding
2. @ViewChild() Better option than local reference
3.
Session 6
Lifecycle of Angular Components
1. ngOnInit() - gets called when component object is created
2. ngOnChanges() - gets called before ngonInit() only when there is any property binding
3. ngDoCheck() - gets called on every changes and every event happened in component
4. ngAfterContentInit() - if
5. ngAfterContentChecked() - any changes/ events occurred in ng-content, this method gets called
6. ngAfterViewInit() - gets called on the initialization of local variables. Ex. - #empName - @ViewChild etc.
7. ngAfterViewChecked() - gets called on every changes/events occurred in local variables
8. ngOnDestroy() - gets called when components is destroyed from memory
Session 7
1. Directives are special entity to provide some functionality with styles and events to already existing html elements
2. @Hostlistner - to handle any event which is firing on host element
3. @Hostbinding - to manipulate the css property of host element
4. ElementRef - Class which holds the reference of host element
5. Renderer2 - use to handle ElementRef object safely
6. Can configure property bindings with help of @Input() decorator
Session 8
1. What service?
2. How to inject service?
3. How to call common method? How to share data between components?
4. Default behavior of service injection in angular
5. How to override default behaviour of service injection
6. How to inject service in another service?
Session 9
1. Use services to share the changes in common data on any event occured in application.
Session 10
- Routing
- What is routing and what is use of routing?
- How to configure routes?
- routerLink - to change the path on address bar without refreshing page
- routerLinkActive - to apply css class for active routes
- routerLinkActiveoptions - to exact match of route while applying css class
- taking care with relative and aboslute path
- router.navigate()- help to navigate programatically
- how to pass query parameter and how to fetch in other components?
- how to pass path parameters and how to fetch in other components?
- what is fragments? how you can send the fragments over routes? and how can you fetch them?
- queryParams and params observables
Session 11
- Child Routing
- canActivate route guard - to check whether you are valid or not before accesing component.
- canDeactivate - to check whether you allowed to leave from component
Session 12
- Traditional approach of form handling
- Template driven angular form
- How register input fields to angular form?
- How to access NgForm object
- different flags for form and form controls
- validations
- applying css for invalid fields
Session - 13
- Reactive form
- Validations with Reactive Form
- How to create Custom Validators
- Form Array - to create dynamic form
Session 14
- Http Client Module
- HttpClient service
- how to call post(), get(), delete() etc.
- how to create interceptor to intercept request and modify request?
Session 15
- How to refactor code in different components?
- What is Observables and how we can use them in component communication?
Session 16
- What is pipe
- how to use internal pipes
- How to pass extra parameters to pipe
- how to create custom pipe
- How to filter using pipe
Session 17
Angular Material
- mat-input, mat-paginator, mat-card, mat-button etc.
Session 18
- How we can achieve authentication with the help of observables, services, interceptors and localeStorage of browser?
- How can we use rxjs operators like pipe, tab, map on observables to get the data before subscription