[disabled] vs [attr.disabled]

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <hr><br>
            <code>
                [disabled]="variable"<br>
                [checked]="variable"
            </code>
            <br><br>
            
            <input type="checkbox" [disabled]="isDisabled" [checked]="isChecked"> Disabled and checked
            <br>
            <input type="checkbox" [disabled]="isDisabled" [checked]="isNotChecked"> Disabled and not checked
            <br>
            <input type="checkbox" [disabled]="isNotDisabled" [checked]="isChecked"> Not disabled and checked
            <br>
            <input type="checkbox" [disabled]="isNotDisabled" [checked]="isNotChecked"> Not disabled and not checked
            <br><br><hr><br>
            <code>
                [attr.disabled]="variable ? true : null"<br>
                [attr.checked]="variable ? true : null"
            </code>
            <br><br>
            <input type="checkbox" [attr.disabled]="isDisabled ? true : null" [attr.checked]="isChecked ? true : null"> Disabled and checked
            <br>
            <input type="checkbox" [attr.disabled]="isDisabled ? true : null" [attr.checked]="isNotChecked ? true : null"> Disabled and not checked
            <br>
            <input type="checkbox" [attr.disabled]="isNotDisabled ? true : null" [attr.checked]="isChecked ? true : null"> Not disabled and checked
            <br>
            <input type="checkbox" [attr.disabled]="isNotDisabled ? true : null" [attr.checked]="isNotChecked ? true : null"> Not disabled and not checked
            <br>
        </div>
    `,
})
export class App {
    name: string;
    isDisabled: boolean;
    isNotDisabled: boolean;
    isChecked: boolean;
    isNotChecked: boolean;

    constructor() {
        this.name = `Angular! v${VERSION.full}`;
        this.isDisabled = true;
        this.isNotDisabled = false;
        this.isChecked = true;
        this.isNotChecked = false;
    }
}

@NgModule({
    imports: [BrowserModule],
    declarations: [App],
    bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^6.0.9",
        "@angular/compiler": "^6.0.9",
        "@angular/core": "^6.0.9",
        "@angular/platform-browser": "^6.0.9",
        "@angular/platform-browser-dynamic": "^6.0.9",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}