npm install angular@latest
ng new myApp
//server run on default port 4200
cd myApp
ng serve
Getting started ==> stop at Editing First App
Create a workspace and initial application
//Start creating angular ng new my-first-app
//Run ng web server ng serve
Course Structure The Basic component & data binding Directives Services & Dependency Injection Routing Observable Forms Pipes Http Authenication Optimization & NgModules Deployment Animation & Testing Installed bootstrapnpm install --save bootstrap@3angular.json configure CLI import style in angular.json by adding or searching Ends at 7.Course Structure index.html under the body tag represent for all app.component main.ts ==> import { AppModule } from './app/app.module'; passed the AppModule to the method NOTE ==> Angular is a JSFramework, changing your DOM(HTML) at runtime Each component have own template, html, business logic Component is the decorator ==> enhance your class, element selector ==> html element alble to use component later after add new component need to change app.module.ts to use it angular use component to build web pages use module to bundle component as packages after add new component need to change app.module.ts to use it add declaration in app.module.ts to know the added new component user youreditor+emmet to suggestion https://code.visualstudio.com/blogs/2017/08/07/emmet-2.0 add autoclose tag extension in your ide if end tag doesn't show after enter first tag ng generate component servers ng g c servers to use multi-line expression ==> use `` instead of '' Attribut e Selector selector: '[app-servers]', use it in html element as a tag Class Selector selector: '.app-servers', //Should use this element style Element Selector ( Element Tag) selector: 'app-server', [disabled]= "!allowNewServer" Event Binding (event) = "expression"Data binding is communication between typescript(business logic) and template(html) Property binding and event binding Add Server Declaring variable in Typescript serverId:number = 10; serverStatus:String = 'Offline'; Casting as HTMLInputElement ==> user $event to fetch the data To be able to use ngModel ==> FormModule from (@angular/forms) need to abe added to import array in AppModule (default in CLI project)
Notes ==> Don't use space between [( and )] otherwise raised error DOMException: Failed to execute 'setAttribute' on 'Element': '[(' is not a valid attribute name. Directives are instructions in the DOM.
*ngIf only on when the condition is true html element is added dynamically
Server was created, server name is {{serverName}}
ngIf with else noServer is like marker
Server was created, server name is {{serverName}}
No Server was created
Unlike structural directives, attribute directives don't add or remove elements. They only change the element they were placed on. [] ==> indicate want to bind some data on directive ngStyle attribute directive
*ngFor
npm install --save jquery
npm install --save bootstrap@3
add angular.json or angular-cli.json ==> add in style array
ng generate component componentName --spec false // set false to prevent the creation of testing file
ng g c componentName --spec false
ng g c specificFolderName/componentName -- spec false
export class Ingredient{
public name: string;
public amount: number;
constructor(name: string, amount: number){
this.name = name;
this.amount = amount;
}
}
same as
export class Ingredient{
constructor(public name: string, public amount: number){}
}
Use aguary for debugging in chrome,browser
https://augury.rangle.io/
Running old version from new version ==> angular cli version raised error
like
ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
solve by
ReactiveX/rxjs#4540
"rxjs": "^6.0.0" change "rxjs": "6.0.0"
and next go to terminal
and install npm using this command "npm i"
enjoy
Passing model from main app component to child component ==>
type script syntax defining the type => element may only have this type ==> like class have fields
element: {type: string, name: string, content: string};
declare @Input() in main component's passing data
@Input() element: {type: string, name: string, content: string};
in main component html passing element using decorator [] as element
<app-server-element *ngFor="let serverElement of serverElements" [element]="serverElement">
in child component need to add @Input() in passing element decorator
@Input() element: {type: string, name: string, content: string};
@Input('srvElement') element: {type: string, name: string, content: string};
@Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();