angular binding

1<input [disabled]="condition ? true : false">
2<input [attr.disabled]="condition ? 'disabled' : null">

1      
2        content_copy
3      
4      <app-sizer [(size)]="fontSizePx"></app-sizer>
5    

1    // component.ts
2
3    @Component({
4      templateUrl: 'component.html',
5      selector: 'app-component',
6    })
7    export class Component {
8      name = 'Peter';
9
10      updateName() {
11        this.name = 'John';
12      }
13    }
14        // component.html
15
16    <p>My name is {{name}}</p>
17    <button (click)="updateName()">Update button</button>

1    // component.ts
2
3    @Component({
4      templateUrl: 'component.html',
5      selector: 'app-component',
6    })
7    export class Component {
8      name = 'Peter';
9
10      updateName() {
11        this.name = 'John';
12      }
13    }
14

1
2import { Component } from "@angular/core";
3@Component({
4   selector: 'app-example',
5  template: `
6              <div>
7              <input [value]='myText'></span>       
8              </div>
9              `
10})
11export class AppComponent {
12  myText: string = "Hello World";
13}