Scribd
Upload
17 views

Notes NG

The document discusses several Angular concepts and commands: 1) It explains the basic application structure of index.html -> main.ts -> app module -> app component. It also covers bindings, styles, selectors and different types like event, property, and two-way bindings. 2) It provides an overview of common Angular CLI commands like ng new, ng serve, ng generate among others and explains the purpose of files like package.json and angular.json. 3) It discusses concepts like AOT compilation, differential loading, polyfills, generating libraries and applications, and using Angular elements to dynamically load components.

Uploaded by

rakeshbay77
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views

Notes NG

The document discusses several Angular concepts and commands: 1) It explains the basic application structure of index.html -> main.ts -> app module -> app component. It also covers bindings, styles, selectors and different types like event, property, and two-way bindings. 2) It provides an overview of common Angular CLI commands like ng new, ng serve, ng generate among others and explains the purpose of files like package.json and angular.json. 3) It discusses concepts like AOT compilation, differential loading, polyfills, generating libraries and applications, and using Angular elements to dynamically load components.

Uploaded by

rakeshbay77
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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/[email protected]

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

You might also like