index.html -> main.

ts->app module->app component

inline style priority than .css file

styles: [
`
h3 {
color: dodgerblue;
}
`,
],

selector:app-server to a div (attribute , class )

event , <property> ,2 way , string interpolation //bindings

<[property]="expression">
(click)=func($event) //event binding
[(ngModel)]="prop1"
{{prop1}}

<button [disabled]="UserName === ''" (click)="updateUserName()">Reset</button>

ng new --help

devdependancies - to build app easily

dependencies - code related part of app

"angularCompilerOptions": // compiles angular app (js + html ) Dom instructions

ng help
ng serve --help
ng generate --help
ng lint

builders
--------
ng build
ng test
ng lint
ng deploy //deploy to a host
ng build --prod

package .json what i need to run app

angular.json what to use for what

The Angular ahead-of-time (AOT) compiler converts your Angular HTML

and TypeScript code into efficient JavaScript code during the build phase
before the browser downloads and runs that code

use schematics if you use material on project

ng generate @angular/material:navigation main //adds new component with all
code / blueprint
ng add @angular/material@14.2.7

ng update

differential loading .1. determines which bundle to send to the browser2.

sending that bundle to that client browser
polyfills // enable/disable which feature(animations) to support in the browsers

ng generate application backend //creates a project /application

ng serve --project= backend

/default-project in angular.json

ng new angular-shop --create-application=false // one folder with multiple

projects

ng g library my-button //angular material library

angular elements (used for loading dynamic content)- component to native web
component/custom html elements

npm install --save @angular/elements

inside settimeout(after n seconds) rendering a component . angular can't

understand this so we use angular elements
constructor(){
const AlertElement=createCustomElement(AlertComponent,{injection:injection,
domSanitizer:DomSanitizer}){
customElements.define('my-alert',AlertElement);
setTimeout(()=>{
this.content=domSanitizer.bypassSecurityTrustHtml("<my-alert></my-alert>")
},1000)
}}

ngstyle // dynamically picks from .ts

ngclass // it's picks only classes

[ngStyle]="{ backgroundColor: getColor() }"

[ngClass]="{ online: serverStatus==='online' }" //condition based