rajaramtt

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  form = this.formBuilder.group({
    firstName: [''],
    lastName: [''],
    age: [''],
  });

rajaramtt

Property	

<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>


Event

<button (click)="onSave()">Save</button>

rajaramtt

    
/*

{
  "goodPackage": {
      "upsellList": [
        {
          "productCode": "product1"
        }
      ]

rajaramtt

Annotations: TypeScript is statically typed and, therefore, all checks are performed at compile time. As mentioned before Types are annotated using :TypeAnnotation syntax.

Primitive Types

let isDone: boolean = false;

rajaramtt

https://angular.io/api/core/ViewContainerRef

https://angular.io/guide/dynamic-component-loader

https://medium.com/better-programming/creating-a-structural-directive-similar-to-ngif-in-angular-4709bac8044b

rajaramtt

import { Directive, Input, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {
  @Input() fieldMaxLength: number;
  constructor(private _el: ElementRef) { }

  @HostListener('keypress', ['$event']) onkeypress(event) {

rajaramtt

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appFocusfirstInvalidfield]'
})
export class FocusfirstInvalidfieldDirective {

  constructor(private el: ElementRef) { }

  @HostListener('submit', ['$event'])

rajaramtt

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appBlockCopyPaste]'
})
export class BlockCopyPasteDirective {
  constructor() { }

  @HostListener('paste', ['$event']) blockPaste(e: KeyboardEvent) {
    e.preventDefault();

rajaramtt

Angular Preloading Strategy

Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app. This will help boost up the loading time of the app

const app_routes: Routes = [

rajaramtt

  public onlineOffline: boolean = navigator.onLine;
  constructor(.......)
  ................
  ................
  
    ngOnInit() {
    window.addEventListener('online', () => {
      this.onlineOffline = true;
    });