feat(docs-infra): add getting started widgets (angular#26059)

PR Close angular#26059

Author: brandonroberts

aio/content/marketing/test.html

@@ -120,3 +120,20 @@ <h2>&lt;live-example&gt;</h2>
 <live-example embedded name="testy" stackblitz="super-stackblitz"></live-example>
 
 <p>More text follows ...</p>
+
+<p>Getting Started Widgets</p>
+
+<p>Interpolation</p>
+<aio-gs-interpolation></aio-gs-interpolation>
+
+<p>Property Binding</p>
+<aio-gs-property-binding></aio-gs-property-binding>
+
+<p>Event Binding</p>
+<aio-gs-event-binding></aio-gs-event-binding>
+
+<p>NgIf</p>
+<aio-gs-ng-if></aio-gs-ng-if>
+
+<p>NgFor</p>
+<aio-gs-ng-for></aio-gs-ng-for>

aio/scripts/_payload-limits.json

@@ -2,8 +2,8 @@
   "aio": {
     "master": {
       "uncompressed": {
-        "runtime": 3173,
-        "main": 494475,
+        "runtime": 3881,
+        "main": 499953,
         "polyfills": 53926,
         "prettify": 14917
       }

aio/src/app/custom-elements/element-registry.ts

@@ -48,6 +48,26 @@ export const ELEMENT_MODULE_PATHS_AS_ROUTES = [
     selector: 'live-example',
     loadChildren: './live-example/live-example.module#LiveExampleModule'
   },
+  {
+    selector: 'aio-gs-interpolation',
+    loadChildren: './getting-started/interpolation/interpolation.module#InterpolationModule'
+  },
+  {
+    selector: 'aio-gs-property-binding',
+    loadChildren: './getting-started/property-binding/property-binding.module#PropertyBindingModule'
+  },
+  {
+    selector: 'aio-gs-event-binding',
+    loadChildren: './getting-started/event-binding/event-binding.module#EventBindingModule'
+  },
+  {
+    selector: 'aio-gs-ng-if',
+    loadChildren: './getting-started/ng-if/ng-if.module#NgIfModule'
+  },
+  {
+    selector: 'aio-gs-ng-for',
+    loadChildren: './getting-started/ng-for/ng-for.module#NgForModule'
+  },
 ];
 
 /**

aio/src/app/custom-elements/getting-started/container/container.component.spec.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContainerComponent } from './container.component';
+
+@Component({
+  template: `
+    <aio-gs-container>
+      <ng-container class="template">Template</ng-container>
+      <ng-container class="data">Data</ng-container>
+      <ng-container class="result">Result</ng-container>
+    </aio-gs-container>
+  `
+})
+export class TestComponent {}
+
+describe('Getting Started Container Component', () => {
+  let fixture: ComponentFixture<ContainerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContainerComponent, TestComponent ]
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  it('should project the content into the appropriate areas', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    const pre = compiled.querySelector('pre');
+    const code = compiled.querySelector('code');
+    const tabledata = compiled.querySelectorAll('td');
+
+    expect(pre.textContent).toContain('Template');
+    expect(code.textContent).toContain('Data');
+    expect(tabledata[2].textContent).toContain('Result');
+  });
+});

aio/src/app/custom-elements/getting-started/container/container.component.ts

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'aio-gs-container',
+  template: `
+    <table>
+      <thead>
+        <tr>
+          <th>Template</th>
+          <th>Data</th>
+          <th>Result</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <pre><ng-content select=".template"></ng-content></pre>
+          </td>
+          <td>
+            <code><ng-content select=".data"></ng-content></code>
+          </td>
+          <td><ng-content select=".result"></ng-content></td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+  styles: [
+    `
+    pre {
+      margin: 0;
+    }
+
+    code {
+      display: flex;
+      align-items: center;
+    }
+
+    @media only screen and (max-width: 760px),
+    (min-device-width: 768px) and (max-device-width: 1024px)  {
+      /* Force table to not be like tables anymore */
+      table, thead, tbody, th, td, tr {
+        display: block;
+      }
+
+      /* Hide table headers (but not display: none;, for accessibility) */
+      thead tr {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+      }
+
+      tr { border: 1px solid #ccc; }
+
+      td {
+        /* Behave  like a "row" */
+        border: none;
+        border-bottom: 1px solid #eee;
+        position: relative;
+        padding-top: 10%;
+      }
+
+      td:before {
+        /* Now like a table header */
+        position: absolute;
+        /* Top/left values mimic padding */
+        top: 6px;
+        left: 6px;
+        width: 45%;
+        padding-right: 10px;
+      }
+
+      /* Label the data */
+      td:nth-of-type(1):before { content: "Template"; }
+      td:nth-of-type(2):before { content: "Data"; }
+      td:nth-of-type(3):before { content: "Result"; }
+    }
+    `
+  ]
+})
+export class ContainerComponent { }

aio/src/app/custom-elements/getting-started/container/container.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContainerComponent } from './container.component';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ ContainerComponent ],
+  exports: [ ContainerComponent ]
+})
+export class ContainerModule { }

aio/src/app/custom-elements/getting-started/event-binding/event-binding.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContainerModule } from '../container/container.module';
+import { EventBindingComponent } from './event-binding.component';
+import { createCustomEvent } from '../../../../testing/dom-utils';
+
+describe('Getting Started Event Binding Component', () => {
+  let component: EventBindingComponent;
+  let fixture: ComponentFixture<EventBindingComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ ContainerModule ],
+      declarations: [ EventBindingComponent ]
+    });
+
+    fixture = TestBed.createComponent(EventBindingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    spyOn(window, 'alert');
+  });
+
+  it('should update the name property on input change', () => {
+    const text = 'Hello Angular';
+    const compiled = fixture.debugElement.nativeElement;
+    const input: HTMLInputElement = compiled.querySelector('input');
+
+
+    input.value = text;
+    input.dispatchEvent(createCustomEvent(document, 'input', ''));
+
+    fixture.detectChanges();
+
+    expect(component.name).toBe(text);
+  });
+
+  it('should display an alert when the button is clicked', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    const button: HTMLButtonElement = compiled.querySelector('button');
+
+    button.click();
+
+    expect(window.alert).toHaveBeenCalledWith('Hello, Angular!');
+  });
+});

aio/src/app/custom-elements/getting-started/event-binding/event-binding.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'aio-gs-event-binding',
+  template: `
+    <aio-gs-container>
+      <ng-container class="template">&lt;button (click)="greet(name)"&gt;
+  Greet
+&lt;/button&gt;</ng-container>
+
+      <ng-container class="data">
+        name = '<input #input (input)="name = input.value" [value]="name">';
+      </ng-container>
+
+      <ng-container class="result">
+        <button (click)="greet(name)">
+          Greet
+        </button>
+      </ng-container>
+    </aio-gs-container>
+  `,
+  preserveWhitespaces: true
+})
+export class EventBindingComponent {
+  name = 'Angular';
+
+  greet(name: string) {
+    window.alert(`Hello, ${name}!`);
+  }
+}

aio/src/app/custom-elements/getting-started/event-binding/event-binding.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WithCustomElementComponent } from '../../element-registry';
+import { EventBindingComponent } from './event-binding.component';
+import { ContainerModule } from '../container/container.module';
+
+@NgModule({
+  imports: [ CommonModule, ContainerModule ],
+  declarations: [ EventBindingComponent ],
+  exports: [ EventBindingComponent ],
+  entryComponents: [ EventBindingComponent ]
+})
+export class EventBindingModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = EventBindingComponent;
+}

aio/src/app/custom-elements/getting-started/interpolation/interpolation.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InterpolationComponent } from './interpolation.component';
+import { ContainerModule } from '../container/container.module';
+import { createCustomEvent } from '../../../../testing/dom-utils';
+
+describe('Getting Started Interpolation Component', () => {
+  let component: InterpolationComponent;
+  let fixture: ComponentFixture<InterpolationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ ContainerModule ],
+      declarations: [ InterpolationComponent ]
+    });
+
+    fixture = TestBed.createComponent(InterpolationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should update the siteName property on input change', () => {
+    const text = 'Hello Angular';
+    const compiled = fixture.debugElement.nativeElement;
+    const input: HTMLInputElement = compiled.querySelector('input');
+
+    input.value = text;
+    input.dispatchEvent(createCustomEvent(document, 'input', ''));
+
+    fixture.detectChanges();
+
+    expect(component.siteName).toBe(text);
+  });
+
+  it('should display the siteName', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    const header: HTMLHeadingElement = compiled.querySelector('h1');
+
+    expect(header.textContent).toContain('My Store');
+  });
+});