Routing, HTTP, RxJS, etc.
Components, Modules, Services
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
let text: string = 'This is the initial text';
const setText = (par: string) => text = par;
const returnText = (): string => {
return 'This function returns a string'
};
let stringOrNumber: string | number = 'This is the initial text';
ng new name-of-app
ng generate component component-name
ng g c component-name
ng generate service service-name
ng g s service-name
ng generate module module-one
ng g m module-name
ng generate pipe pipe-one
ng g p pipe-name
ng serve
<button (click)="firstClick()">Click me</button>
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
firstClick() {
console.log('clicked');
}
}
HTML
TypeScript
<div (focus)="myMethod()"></div>
<div (blur)="myMethod()"></div>
<div (submit)="myMethod()"></div>
<div (scroll)="myMethod()"></div>
<div (cut)="myMethod()"></div>
<div (copy)="myMethod()"></div>
<div (paste)="myMethod()"></div>
<div (keydown)="myMethod()"></div>
<div (keypress)="myMethod()"></div>
<div (keyup)="myMethod()"></div>
<div (mouseenter)="myMethod()"></div>
<div (mousedown)="myMethod()"></div>
<div (mouseup)="myMethod()"></div>
<div (click)="myMethod()"></div>
<div (dblclick)="myMethod()"></div>
<div (drag)="myMethod()"></div>
<div (dragover)="myMethod()"></div>
<div (drop)="myMethod()"></div>
<div *ngIf="condition">
Content to render when condition is true.
</div>
<input type="text" ngModel name="name">
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
AddContactComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule, // <--
ReactiveFormsModule // <--
],
providers: [],
bootstrap: [AppComponent]
})
app.model.ts
<form #contactForm="ngForm" (ngSubmit)="submitForm(contactForm.value)">
<div class="form-part">
<label for="name">
Name:
</label>
<input type="text" ngModel name="name" id="name" class="form-input"
placeholder="Name">
<div *ngIf="showCompany">
<label for="company">
Company:
</label>
<input type="text" ngModel name="company" id="company"
placeholder="Company">
</div>
<input type="submit">
</div>
</form>