Angular Component and Bind

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

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