docs: rewrite attribute binding section and add example (#26004)

PR Close #26004

aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,47 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Attribute binding example', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display Property Binding with Angular', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
+  });
+
+  it('should display a table', function() {
+    expect(element.all(by.css('table')).isPresent()).toBe(true);
+  });
+
+  it('should display an Aria button', function () {
+    expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
+  });
+
+  it('should display a blue background on div', function () {
+    expect(element.all(by.css('div')).get(1).getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
+  });
+
+  it('should display a blue div with a red border', function () {
+    expect(element.all(by.css('div')).get(4).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
+  });
+
+  it('should display a div with replaced classes', function () {
+    expect(element.all(by.css('div')).get(5).getAttribute('class')).toEqual('new-class');
+  });
+
+  it('should display four buttons', function() {
+    let redButton = element.all(by.css('button')).get(1);
+    let saveButton = element.all(by.css('button')).get(2);
+    let bigButton = element.all(by.css('button')).get(3);
+    let smallButton = element.all(by.css('button')).get(4);
+
+    expect(redButton.getCssValue('color')).toEqual('rgba(255, 0, 0, 1)');
+    expect(saveButton.getCssValue('background-color')).toEqual('rgba(0, 255, 255, 1)');
+    expect(bigButton.getText()).toBe('Big');
+    expect(smallButton.getText()).toBe('Small');
+  });
+
+});

aio/content/examples/attribute-binding/src/app/app.component.css

@@ -0,0 +1,22 @@
+.special {
+  background-color: #1976d2;
+  color: #ffffff;
+}
+
+.item {
+  font-weight: bold;
+}
+.clearance {
+  border: 2px solid #d41e2e;
+
+}
+.item-clearance {
+  font-style: italic;
+
+}
+
+.new-class {
+  background-color: #ed1b2f;
+  font-style: italic;
+  color: #fff;
+}

aio/content/examples/attribute-binding/src/app/app.component.html

@@ -0,0 +1,65 @@
+
+<h1>Attribute, class, and style bindings</h1>
+<h2>Attribute binding</h2>
+<!-- #docregion attrib-binding-colspan -->
+<table border=1>
+  <!--  expression calculates colspan=2 -->
+  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
+
+  <!-- ERROR: There is no `colspan` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+  <!-- #docregion colSpan -->
+  <!-- Notice the colSpan property is camel case -->
+  <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
+  <!-- #enddocregion colSpan -->
+
+  <tr><td>Five</td><td>Six</td></tr>
+</table>
+<!-- #enddocregion attrib-binding-colspan -->
+
+<div>
+  <!-- #docregion attrib-binding-aria -->
+  <!-- create and set an aria attribute for assistive technology -->
+  <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+  <!-- #enddocregion attrib-binding-aria -->
+</div>
+
+<hr />
+
+<h2>Class binding</h2>
+
+<!-- #docregion is-special -->
+<h3>toggle the "special" class on/off with a property:</h3>
+<div [class.special]="isSpecial">The class binding is special.</div>
+
+<h3>binding to class.special overrides the class attribute:</h3>
+<div class="special" [class.special]="!isSpecial">This one is not so special.</div>
+
+<h3>Using the bind- syntax:</h3>
+<div bind-class.special="isSpecial">This class binding is special too.</div>
+<!-- #enddocregion is-special -->
+
+<!-- #docregion add-class -->
+<h3>Add a class:</h3>
+<div class="item clearance special" [class.item-clearance]="itemClearance">Add another class</div>
+<!-- #enddocregion add-class -->
+
+<!-- #docregion class-override -->
+<h3>Overwrite all existing classes with a new class:</h3>
+<div class="item clearance special" [attr.class]="resetClasses">Reset all classes at once</div>
+<!-- #enddocregion class-override -->
+
+<hr />
+
+<h2>Style binding</h2>
+
+<!-- #docregion style-binding-->
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
+<!-- #enddocregion style-binding -->
+
+<!-- #docregion style-binding-condition-->
+<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
+<!-- #enddocregion style-binding-condition-->

aio/content/examples/attribute-binding/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});

aio/content/examples/attribute-binding/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  actionName = 'Go for it';
+  isSpecial = true;
+  itemClearance = true;
+  resetClasses = 'new-class';
+  canSave = true;
+
+}

aio/content/examples/attribute-binding/src/app/app.module.ts

@@ -0,0 +1,18 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/attribute-binding/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AttributeBinding</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

aio/content/examples/attribute-binding/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

aio/content/examples/attribute-binding/stackblitz.json

@@ -0,0 +1,10 @@
+{
+  "description": "Attribute Binding",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["Attribute Binding"]
+}