export class AppComponent {
  pageTitle = 'helloworld';
}

<h1>{{ pageTitle }}</h1>

export class AppComponent {
  imgUrl = 'https://picsum.photos/200';
}

<div>
  <img [src]="imgUrl" alt="Image" />
</div>

@Component({
  selector: 'app-test',
  template: `
    <h2>
      Welcome {{ name }}
    </h2>
    <input [id]="myId" type="text" value="NickName" />
    <input id="{{myId}}" type="text" value="NickName" />

    <input disabled="false" type="text" value="NickName" />
    <input disabled="{{false}}" type="text" value="NickName" />

    <input [disabled]="isDisabled" type="text" value="NickName" />
    <input bind-disabled="isDisabled" type="text" value="NickName" />

    <button (click)="onChangeDisabled()">Click</button>
  `,
  styleUrls: []
})
export class TestComponent implements OnInit {

  public name = "Hello World";
  public myId = "testId";
  public isDisabled = true;

  () { }

  ngOnInit() {
  }

  onChangeDisabled() {
    this.isDisabled = !this.isDisabled;
  }
}

<app-test></app-test>

export class AppComponent {
  count = 0;

  incrementCount() {
    this.count += 1;
  }
}

<div>
  <button (click)="incrementCount()">Click</button>
  <p>Clicked {{ count }} times</p>
</div>

export class AppComponent {
  userName: string;
}

<div>
  <input type="text" [ngModel]="userName" (ngModelChange)="userName=$event">
  <p>Welcome {{ userName }}</p>
</div>

export class AppComponent {
  nickName: string;

  greetNickName(updatedValue) {
    this.nickName = updatedValue;

    if(updatedValue == 'Nickname'){
      alert('Welcome back Nickname');
    }
  }
}

<div>
  <input type="text" [ngModel]="nickName" (ngModelChange)="greetNickName($event)">
  <p>Welcome {{ nickName }}</p>
</div>

export class AppComponent {
  name: string;
}

<div>
  <input type="text" [(ngModel)]="name">
  <p>Welcome {{ name }}</p>
</div>

@Component({
  selector: 'app-test',
  template: `
    <h2>
      Welcome {{ name }}
    </h2>
    <h2 class="text-success">Hello</h2>
    <h2 [class]="successClass">Hello</h2>

    <h2 class="text-special" [class]="successClass">Hello</h2> <!--text-special not work-->

    <h2 [class.text-danger]="hasError">Hello</h2> <!--single class-->

    <h2 [ngClass]="messageClasses">Hello</h2> <!--multiple classes-->

    <button (click)="onChangeClass()">Click</button>
  `,
  styles: [`
    .text-success {
      color: green;
    }
    .text-danger {
      color: red;
    }
    .text-special {
      font-style: italic;
    }
  `]
})
export class TestComponent implements OnInit {

  public name = "Hello World";
  public successClass = "text-success"
  public hasError = false;
  public isSpecial = true;
  public messageClasses = {
    "text-success": !this.hasError,
    "text-danger": this.hasError,
    "text-special": this.isSpecial
  }

  () { }

  ngOnInit() {
  }

  onChangeClass() {
    this.hasError = !this.hasError;
    this.messageClasses["text-danger"] = this.hasError;
  }
}

<app-test></app-test>

@Component({
  selector: 'app-test',
  template: `
    <h2>
      Welcome {{ name }}
    </h2>

    <h2 [style.color]="'orange'">Style Binding</h2>
    <h2 [style.color]="hasError ? 'red' : 'green'">Style Binding</h2>
    <h2 [style.color]="highlightColor">Style Binding 2</h2>
    
    <h2 [ngStyle]="titleStyles">Style Binding 3</h2>

    <button (click)="onChangeClass()">Click</button>
  `,
  styles: []
})
export class TestComponent implements OnInit {

  public name = "Hello World";
  public hasError = false;
  public highlightColor = "orange";
  public titleStyles = {
    color: "blue",
    fontStyle: "italic"
  }

  () { }

  ngOnInit() {
  }

  onChangeClass() {
    this.hasError = !this.hasError;
  }
}

<app-test></app-test>

@Component({
  selector: 'app-test',
  template: `
    <h2>
      Welcome {{ name }}
    </h2>

    <button (click)="onClick()">Click Function</button>
    {{ greeting }}

    <button (click)="onClickEvent($event)">Click Event</button>
    {{ greetingEvent }}

    <button (click)="greeting = 'Hello'">Click</button>
  `,
  styles: []
})
export class TestComponent implements OnInit {

  public name = "Hello World";
  public greeting = "";
  public greetingEvent = "";

  () { }

  ngOnInit() {
  }

  onClick() {
    console.log(this.name);
    this.greeting = this.name;
  }

  onClickEvent(event) {
    console.log(event);
    this.greetingEvent = event.type;
  }
}

<app-test></app-test>