Create Component
Component is a UI parts. It’s same meanings of React and Vue.
Create component
ng g component app
app is component name.
Following files are created
app.component.ts |
Component class |
app.component.css |
CSS |
app.component.html |
HTML template |
app.component.spec.ts |
Unit Test |
By default component direct is created
Create component without directory
ng g component --flat app
Simple Bind
It’s basic sample of data bind. It’s almost same as Angular JS.
Use {{}} in template
Example
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
a = 2;
constructor() { }
ngOnInit() {
}
}
AppModule
Module file.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
CommonModule,
BrowserModule,
FormsModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
main.ts
Main file
This decide boot module.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { AppModule } from './app/bind/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
TOPICS