Project Setup

1. Project File Structure

 src
    app
       css
         hero.css
       hero
         hero.ts
       hero-detail
         hero-detail.component.html
         hero-detail.component.ts
       app.component.html
       app.component.ts
       app.module.ts
    assets
       .gitkeep
    environments
        environment.prod.ts
        environment.ts
    favicon.ico
    index.html
    main.ts
    polyfills.ts
    styles.css
    test.ts
    tsconfig.app.json
    tsconfig.spec.json

for more Info https://angular.io/guide/quickstart

• How to make changes in app.component

  Open a project in any editor preferable VisualStudio(https://www.visualstudio.com/downloads)
  open app.component.ts and paste  below code in export class AppComponent 
  name:string = 'My name is your name';
  then open app.component.html and bind the name in doubly braces {{}} like below.
  <h1>{{name}}</h1>

• Two-way Data Binding

  Two-way data binding combines the input and output binding into a single notation using the ngModel directive
  to use ngModel you need  to do import FormsModule from '@angular/forms' and declare formModule in import section
  like below.

  import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule }   from '@angular/forms';

  import { AppComponent }  from './app.component';
  @NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
  })

  open app.component.html and paste below line 
  <input [(ngModel)]="name" >
  
  What this is doing behind the scenes is equivalent to:

  <input [ngModel]="name" (ngModelChange)="name=$event">

  when you use like [ngModel] then its like one way data binding and (ngModelChange)
  detect any changes in input you will learn more about this in upcoming tutorial.