rajaramtt

Including the CUSTOM_ELEMENTS_SCHEMA in the module allows the use of the web components in the HTML markup without the compiler producing errors

• Defines a schema that allows an NgModule to contain the following:
• • Non-Angular elements named with dash case (-).
• • Element properties named with dash case (-).
• Dash case is the naming convention for custom elements.

rajaramtt

To enable HashLocationStrategy in an Angular application we pass {useHash: true} when we are providing our routes with RouterModule, like so:

TypeScript RouterModule.forRoot(routes, {useHash: true})

http://somedomain.com/page#routing-strategies Taking a look at the app we’ve built so far, if running locally the URLs look something like:

localhost:4040/#/search localhost:4040/#/artist/1234/tracks

rajaramtt

Sass (which stands for Syntactically Awesome Style Sheets) is an extension to CSS.

sass is superset of css Sass is syntatic sugar of css It helps in writing CSS quickly.

SASS supports two syntaxes namely SCSS and Indented syntax

• The SCSS - is an extension of CSS syntax. files use the extension .scss.

rajaramtt

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

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

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

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

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

rajaramtt

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

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

  constructor(private el: ElementRef) { }

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

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

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

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;