Skip to content

Commit affcbbd

Browse files
brandonrobertskara
brandonroberts
authored and
kara
committed
feat(docs-infra): add getting started widgets (#26059)
PR Close #26059
1 parent 496372d commit affcbbd

24 files changed

Lines changed: 839 additions & 1676 deletions

‎aio/content/marketing/test.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,20 @@ <h2>&lt;live-example&gt;</h2>
120120
<live-example embedded name="testy" stackblitz="super-stackblitz"></live-example>
121121

122122
<p>More text follows ...</p>
123+
124+
<p>Getting Started Widgets</p>
125+
126+
<p>Interpolation</p>
127+
<aio-gs-interpolation></aio-gs-interpolation>
128+
129+
<p>Property Binding</p>
130+
<aio-gs-property-binding></aio-gs-property-binding>
131+
132+
<p>Event Binding</p>
133+
<aio-gs-event-binding></aio-gs-event-binding>
134+
135+
<p>NgIf</p>
136+
<aio-gs-ng-if></aio-gs-ng-if>
137+
138+
<p>NgFor</p>
139+
<aio-gs-ng-for></aio-gs-ng-for>

‎aio/scripts/_payload-limits.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"aio": {
33
"master": {
44
"uncompressed": {
5-
"runtime": 3173,
6-
"main": 494475,
5+
"runtime": 3881,
6+
"main": 499953,
77
"polyfills": 53926,
88
"prettify": 14917
99
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,26 @@ export const ELEMENT_MODULE_PATHS_AS_ROUTES = [
4848
selector: 'live-example',
4949
loadChildren: './live-example/live-example.module#LiveExampleModule'
5050
},
51+
{
52+
selector: 'aio-gs-interpolation',
53+
loadChildren: './getting-started/interpolation/interpolation.module#InterpolationModule'
54+
},
55+
{
56+
selector: 'aio-gs-property-binding',
57+
loadChildren: './getting-started/property-binding/property-binding.module#PropertyBindingModule'
58+
},
59+
{
60+
selector: 'aio-gs-event-binding',
61+
loadChildren: './getting-started/event-binding/event-binding.module#EventBindingModule'
62+
},
63+
{
64+
selector: 'aio-gs-ng-if',
65+
loadChildren: './getting-started/ng-if/ng-if.module#NgIfModule'
66+
},
67+
{
68+
selector: 'aio-gs-ng-for',
69+
loadChildren: './getting-started/ng-for/ng-for.module#NgForModule'
70+
},
5171
];
5272

5373
/**

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component } from '@angular/core';
2+
import { ComponentFixture, TestBed } from '@angular/core/testing';
3+
4+
import { ContainerComponent } from './container.component';
5+
6+
@Component({
7+
template: `
8+
<aio-gs-container>
9+
<ng-container class="template">Template</ng-container>
10+
<ng-container class="data">Data</ng-container>
11+
<ng-container class="result">Result</ng-container>
12+
</aio-gs-container>
13+
`
14+
})
15+
export class TestComponent {}
16+
17+
describe('Getting Started Container Component', () => {
18+
let fixture: ComponentFixture<ContainerComponent>;
19+
20+
beforeEach(() => {
21+
TestBed.configureTestingModule({
22+
declarations: [ ContainerComponent, TestComponent ]
23+
});
24+
25+
fixture = TestBed.createComponent(TestComponent);
26+
fixture.detectChanges();
27+
});
28+
29+
it('should project the content into the appropriate areas', () => {
30+
const compiled = fixture.debugElement.nativeElement;
31+
const pre = compiled.querySelector('pre');
32+
const code = compiled.querySelector('code');
33+
const tabledata = compiled.querySelectorAll('td');
34+
35+
expect(pre.textContent).toContain('Template');
36+
expect(code.textContent).toContain('Data');
37+
expect(tabledata[2].textContent).toContain('Result');
38+
});
39+
});

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'aio-gs-container',
5+
template: `
6+
<table>
7+
<thead>
8+
<tr>
9+
<th>Template</th>
10+
<th>Data</th>
11+
<th>Result</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr>
16+
<td>
17+
<pre><ng-content select=".template"></ng-content></pre>
18+
</td>
19+
<td>
20+
<code><ng-content select=".data"></ng-content></code>
21+
</td>
22+
<td><ng-content select=".result"></ng-content></td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
`,
27+
styles: [
28+
`
29+
pre {
30+
margin: 0;
31+
}
32+
33+
code {
34+
display: flex;
35+
align-items: center;
36+
}
37+
38+
@media only screen and (max-width: 760px),
39+
(min-device-width: 768px) and (max-device-width: 1024px) {
40+
/* Force table to not be like tables anymore */
41+
table, thead, tbody, th, td, tr {
42+
display: block;
43+
}
44+
45+
/* Hide table headers (but not display: none;, for accessibility) */
46+
thead tr {
47+
position: absolute;
48+
top: -9999px;
49+
left: -9999px;
50+
}
51+
52+
tr { border: 1px solid #ccc; }
53+
54+
td {
55+
/* Behave like a "row" */
56+
border: none;
57+
border-bottom: 1px solid #eee;
58+
position: relative;
59+
padding-top: 10%;
60+
}
61+
62+
td:before {
63+
/* Now like a table header */
64+
position: absolute;
65+
/* Top/left values mimic padding */
66+
top: 6px;
67+
left: 6px;
68+
width: 45%;
69+
padding-right: 10px;
70+
}
71+
72+
/* Label the data */
73+
td:nth-of-type(1):before { content: "Template"; }
74+
td:nth-of-type(2):before { content: "Data"; }
75+
td:nth-of-type(3):before { content: "Result"; }
76+
}
77+
`
78+
]
79+
})
80+
export class ContainerComponent { }

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { ContainerComponent } from './container.component';
4+
5+
@NgModule({
6+
imports: [ CommonModule ],
7+
declarations: [ ContainerComponent ],
8+
exports: [ ContainerComponent ]
9+
})
10+
export class ContainerModule { }

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ContainerModule } from '../container/container.module';
4+
import { EventBindingComponent } from './event-binding.component';
5+
import { createCustomEvent } from '../../../../testing/dom-utils';
6+
7+
describe('Getting Started Event Binding Component', () => {
8+
let component: EventBindingComponent;
9+
let fixture: ComponentFixture<EventBindingComponent>;
10+
11+
beforeEach(() => {
12+
TestBed.configureTestingModule({
13+
imports: [ ContainerModule ],
14+
declarations: [ EventBindingComponent ]
15+
});
16+
17+
fixture = TestBed.createComponent(EventBindingComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
21+
spyOn(window, 'alert');
22+
});
23+
24+
it('should update the name property on input change', () => {
25+
const text = 'Hello Angular';
26+
const compiled = fixture.debugElement.nativeElement;
27+
const input: HTMLInputElement = compiled.querySelector('input');
28+
29+
30+
input.value = text;
31+
input.dispatchEvent(createCustomEvent(document, 'input', ''));
32+
33+
fixture.detectChanges();
34+
35+
expect(component.name).toBe(text);
36+
});
37+
38+
it('should display an alert when the button is clicked', () => {
39+
const compiled = fixture.debugElement.nativeElement;
40+
const button: HTMLButtonElement = compiled.querySelector('button');
41+
42+
button.click();
43+
44+
expect(window.alert).toHaveBeenCalledWith('Hello, Angular!');
45+
});
46+
});

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'aio-gs-event-binding',
5+
template: `
6+
<aio-gs-container>
7+
<ng-container class="template">&lt;button (click)="greet(name)"&gt;
8+
Greet
9+
&lt;/button&gt;</ng-container>
10+
11+
<ng-container class="data">
12+
name = '<input #input (input)="name = input.value" [value]="name">';
13+
</ng-container>
14+
15+
<ng-container class="result">
16+
<button (click)="greet(name)">
17+
Greet
18+
</button>
19+
</ng-container>
20+
</aio-gs-container>
21+
`,
22+
preserveWhitespaces: true
23+
})
24+
export class EventBindingComponent {
25+
name = 'Angular';
26+
27+
greet(name: string) {
28+
window.alert(`Hello, ${name}!`);
29+
}
30+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule, Type } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { WithCustomElementComponent } from '../../element-registry';
4+
import { EventBindingComponent } from './event-binding.component';
5+
import { ContainerModule } from '../container/container.module';
6+
7+
@NgModule({
8+
imports: [ CommonModule, ContainerModule ],
9+
declarations: [ EventBindingComponent ],
10+
exports: [ EventBindingComponent ],
11+
entryComponents: [ EventBindingComponent ]
12+
})
13+
export class EventBindingModule implements WithCustomElementComponent {
14+
customElementComponent: Type<any> = EventBindingComponent;
15+
}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { InterpolationComponent } from './interpolation.component';
4+
import { ContainerModule } from '../container/container.module';
5+
import { createCustomEvent } from '../../../../testing/dom-utils';
6+
7+
describe('Getting Started Interpolation Component', () => {
8+
let component: InterpolationComponent;
9+
let fixture: ComponentFixture<InterpolationComponent>;
10+
11+
beforeEach(() => {
12+
TestBed.configureTestingModule({
13+
imports: [ ContainerModule ],
14+
declarations: [ InterpolationComponent ]
15+
});
16+
17+
fixture = TestBed.createComponent(InterpolationComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should update the siteName property on input change', () => {
23+
const text = 'Hello Angular';
24+
const compiled = fixture.debugElement.nativeElement;
25+
const input: HTMLInputElement = compiled.querySelector('input');
26+
27+
input.value = text;
28+
input.dispatchEvent(createCustomEvent(document, 'input', ''));
29+
30+
fixture.detectChanges();
31+
32+
expect(component.siteName).toBe(text);
33+
});
34+
35+
it('should display the siteName', () => {
36+
const compiled = fixture.debugElement.nativeElement;
37+
const header: HTMLHeadingElement = compiled.querySelector('h1');
38+
39+
expect(header.textContent).toContain('My Store');
40+
});
41+
});

0 commit comments

Comments
 (0)