Javascript tips and tricks

This ==>

The object that is executing the current function

method-obj

function => global window

construction 

const v = new Video('b')  // will create new obj

hence this is obj scope

if callback in method then that will be window be the this

and in foreach method in callback we can use this as second arguament

using call method we use some other function on other object

with arrow function , this will take scope from outer function and use that

Angular small updates

Folder Structure

ng new package-name

in package.json  there are diffrent npm dependencies mentioned 

npm init

will initiate the package.json file 

and for the changes we will have to do it in angular.json file

like for bootstrap style sheet

ng g module module-name

ng g c component-name --module module-name

ng new myProject --skip-install  ==> this will skip npm install command

and after project is created use npm install to install dependencies

scroll to end

  @ViewChild('scroll', { static: true }) scroll: any;

setTimeout(() => {

    this.scroll.nativeElement.scrollTo(0, this.scroll.nativeElement.scrollHeight);

  }, 0);

----HTML

    <div class="main-chat-area-msg-area"  #scroll>

Lazy loading

in the new module  

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { Routes, RouterModule } from '@angular/router';

import { CartComponent } from './cart.component';

const routes:Routes=[

  {path:'' , component:CartComponent}

];

@NgModule({

  declarations: [],

  imports: [

    CommonModule,

    RouterModule.forChild(routes)

  ]

})

export class CartmoduleModule { }

in the old router file

{

    path:'cart',loadChildren:()=>import('./cart/cartmodule.module').then(m=>m.CartmoduleModule)

  }

Directives

Basic

export class BasicDirective implements OnInit {

  constructor(private elRef:ElementRef) { }

ngOnInit(){

  this.elRef.nativeElement.style.backgroundColor='red';

}

}

Renderer

export class RendererDirective implements OnInit {

  constructor(private elRef:ElementRef, private renderer:Renderer2) { }

ngOnInit(){

  this.renderer.setStyle(this.elRef.nativeElement,'backgroundColor','yellow');

  this.renderer.addClass(this.elRef.nativeElement,'active')

}

}

HostListener

export class HostlistDirective implements OnInit {

  constructor(private elRef:ElementRef, private renderer:Renderer2) { }

  clicked:boolean=false;

ngOnInit(){

}

@HostListener('click') mouseClicked(){

  if(!this.clicked){

    this.renderer.addClass(this.elRef.nativeElement,'active');

    this.clicked=!this.clicked;

  }

  else{

    this.renderer.removeClass(this.elRef.nativeElement,'active');

    this.clicked=!this.clicked;

  }

}

}

HostBinding

export class HostbindDirective {

@HostBinding('class.active') changeColor:String;

  constructor() { }

  @HostListener('click') onClicked(click){

    this.changeColor = 'red';

  }

}

HTML

<div >

  <p appBasic>Basic Directive</p>

</div>

<div>

  <p appRenderer > Renderer</p>

</div>

<div>

  <p appHostlist>HostListener</p>

</div>

<div>

  <p appHostbind>HostBinding</p>

</div>

Angular docs