Posts

Showing posts from February, 2024

RouteGuards

  CanActivate CanDeactivate Resolve CanLoad CanActivateChild

Property

  Without selector in HTML Tag value disable hidden checked selected href innerText innerhtml With selector in HTML Tag   1.[value] 2.[disabled] 3.[hidden]

HooksLifeCycle

  ngOnChange ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy

ChildRouting

SnapShotRouting

QueryParamRouting

Routing

Moving from one WebPage to another WebPage. Routing is used to navigate from one component to another component in angular. Steps: 1.Configuring the route path in app-routing 2.Adding router-outlet in app.component.html 3.Add routing links in ts-template 4.import  AppRoutingModule in app.modules <router-outlet> </router-outlet> RoterLink Navigate RoterLink without param : <li><a [routerLink]="['product']>Product</a></li> with param :  <li><a [routerLink]="['product']" [queryparams]="{page:2}" >Product</a></li> Navigate     ctor (private _servRouter : Router, ){} without param : onBack(){ this. _servRouter.navigate(['/ChildDashboardComponent']);                        or this. _servRouter.navigateByUrl('/ChildDashboardComponent'); } with param : onBack(){ this. _servRouter.navigate(['/ChildDashboardComponent'] { queryParams:{tabNumber: +this.tabNumbe...

CustomPipes

 ng g pipie <pipename>

Pipes

 Used to Transform data before displaying it on in the browser. Pipes takes data as input and format or transform that data to some form. syn: Expression | Pipename

TemplateDrivenForms

  ngModel ngForm ngSubmit ngValue

ReactivesForms

  FormControl FormGroup FormBuilder FormArray SetValue PatchValue Form Control:  is class and Create a insatance to it then is Created to it. FormGroup: Minimum FormControls two  and Create instance to FromGroup then Bind It has similar properties has FormControl. With the FormGroup Multiple  FormControls can handled  single time.

Forms

  Forms are used to take information from the user in the web Application  Ex:Registration Form,Ligin Form Types of Forms: Template-Driven Forms Reactive Forms 1.If Instance of FormControl and FormGroup is Created in HTML then it is  Template-Driven Forms. 2.If Instance of FormControl and FormGroup is Created in TS and then called in HTML then it is  Reactive Forms

Decorators

Class decorators Property decorators Method decorators  Parameter decorators  Class decorators, such as  @Component   and   @NgModule Property decorators for properties inside classes, such as  @Input  and  @Output Method decorators for methods inside classes, such as  @HostListener Parameter decorators for parameters inside class constructors, such as  @Inject

Directives

  Directives: Directives are classes that add new behavior or modify the existing behavior to the elements in the template.                                            or Directives are Custom HTML attributes which tell angular to change the structure,  style or behavior of thwe DOM elements Every Tag has its special attributes Types of directives Component directive Structural directive Attribute directive Component directive Components  are special directives in Angular. They are the directive with a template It might confuse you a bit, but if you see the definition of the directive, it says directives are used to manipulate the DOM, so now if you think what component is doing, it is actually showing something in DOM, hence we can say component is also a directive with a template (template or templateUrls). Structural directive Structural directives are used to -...

Events

keypress keydown keyup mouseenter/mouseover mouseleave mouseup mousedown blur focus click doubleclick input inputchange click: This event occurs when a user click on an element. doubleclick :  This event occurs when a user doubleclick on an element. keydown: It gives the value before key release, while pressing the key only.  keyup: t gives the value after key release. blur: It gives the value after focusing out/clicking other box. focus: It gives the value when returing into the same input box. mouseenter/mouseover: It gives the value when arrow enters the tag. mouseleave: It gives the value when arrow leaves the tag. mouseup mousedown change: This event is triggered when the value of an input element changes.