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>
