Angular
Module-> component ->
npm install -g typescript
tsc -variable
npm install -g @angular/cli
ng serve --open
ng new
ng generate component login
@input -- parent to child component
@output -- child to parent component
@input('name')
variable declaration;
Component :
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.
Templates - A template combines HTML with Angular markup that can modify HTML elements before they are displayed.
Template directives provide program logic, and binding markup connects your application data and the DOM.
Binding
-> One way binding
-> Two way binding - achieved by ngModel --> FormsModule --> @angular/forms
---->1. Event binding
=> String Interpolation with Attribute binding -
---->2.Attribute binding --> [src]
---->3.Property binding --> Binding with html elements properties <h1 [innerText]="text">
Property binding with safe navigation Operater --> ? is a safenavigation operation for null check. --> user?.name
==============
-->What are decorators in Angular?
Decorators are a design pattern or function that defines how Angular features work. They are used to make prior modifications to a class, service, or filter. Angular supports four types of decorators, they are: Class Decorators, Property Decorators, Method Decorators and Parameter Decorators
==============
->Directives : Directives are attributes that allow the user to write new HTML syntax specific to their applications. They execute whenever the Angular compiler finds them in the DOM. Angular supports three types of directives.
1.Component directives - These are special directives that have a template or template URLs. They are essentially components that show something in the DOM.
2.Structural directives - ngFor, ngIf - These directives manipulate the DOM elements by adding or removing elements, thus changing the structure of the DOM. ngFor Variables (index, first, last, even, odd)
3.Attribute directives - ngClass, ngStyle. These directives change the appearance or behavior of an html element.
Creating Custom Directive - Highlighting Text Example, you can use the @Directive
- ng generate directive highlight(directive name)
================
->Pipes: -
change one value to another value
Some key features include:
Pipes are defined using the pipe “|” symbol.
Pipes can be chained with other pipes.
Pipes can be provided with arguments by using the colon (:) sign.
--> pripe ice ppercase pipe,lowercase pipes, slice pipe
Date pipe - > unformated date to fourmatted date . {{toDate | date}}
===============================================
->LifeCycle Hooks
1.Constructor: Angular invokes the component class constructor
2.ngOnChanges: --only for @input decorator-- Angular calls ngOnChanges method whenever it detects changes to input properties. The first call happens before the component is fully initialized, which is before ngOnInit
3.ngOnInit: It gets called once, after the first ngOnChanges. At this point, the component is fully initialized
4.ngDoCheck: Angular calls ngDoCheck method immediately after ngOnInit and then every subsequent check of the component
5.ngAfterContentInit and ngAfterContentChecked: are called after Angular projects external content into the component's view
6.ngAfterViewInit and ngAfterViewChecked: These are called when the component's view, and the views of its child directives, are fully initialized
==========================================
