product.component.html

-----------------------

<p>product works!</p>

<h1>Product</h1>

<h2>Title: {{product.title}}</h2>

<h3>Price: {{product.price}}</h3>

<input type="text" [(ngModel)]='name'>

<h2> {{name}}</h2>

<button (click)="addProduct()" [style.height.px]='btnHeight' [style.width.px]='btnWidth'>Add Product</button>

product.component.ts

---------------------

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-product',

  templateUrl: './product.component.html',

  styleUrls: ['./product.component.css']

})

export class ProductComponent implements OnInit {

  constructor(private cd: ChangeDetectorRef) {   console.log(this.cd);  }

  // Interpolation

  product = {

      title: 'Computer Keyboard',

      price: 500

  };

  // Propety Binding

  btnHeight = 100;

  btnWidth = 100;

  // Two-way binding

  name = `foo`;

  ngOnInit(): void {

    console.log('init life cycle hook');

  }

  // Event Binding

  addProduct() {

    console.log('add Product');

  }

}

app.module.ts

---------------

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ProductComponent } from './product/product.component';

@NgModule({

  declarations: [

    AppComponent,

    ProductComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

PostedBy:pankaj_bhakre