mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
Matthieu Riegler
Pawel Kozlowski
parent
e53a37496f
commit
e1b0e94d77
188 changed files with 0 additions and 2030 deletions
|
|
@ -1,140 +0,0 @@
|
|||
import {browser, element, by} from 'protractor';
|
||||
|
||||
describe('Style Guide', () => {
|
||||
it('01-01', async () => {
|
||||
await browser.get('#/01-01');
|
||||
|
||||
const pre = element(by.tagName('toh-heroes > pre'));
|
||||
expect(await pre.getText()).toContain('Bombasto');
|
||||
expect(await pre.getText()).toContain('Tornado');
|
||||
expect(await pre.getText()).toContain('Magneta');
|
||||
});
|
||||
|
||||
it('02-07', async () => {
|
||||
await browser.get('#/02-07');
|
||||
|
||||
const hero = element(by.tagName('toh-hero > div'));
|
||||
const users = element(by.tagName('admin-users > div'));
|
||||
|
||||
expect(await hero.getText()).toBe('hero component');
|
||||
expect(await users.getText()).toBe('users component');
|
||||
});
|
||||
|
||||
it('02-08', async () => {
|
||||
await browser.get('#/02-08');
|
||||
|
||||
const input = element(by.tagName('input[tohvalidate]'));
|
||||
expect(await input.isPresent()).toBe(true);
|
||||
});
|
||||
|
||||
it('04-10', async () => {
|
||||
await browser.get('#/04-10');
|
||||
|
||||
const div = element(by.tagName('sg-app > toh-heroes > div'));
|
||||
expect(await div.getText()).toBe('This is heroes component');
|
||||
});
|
||||
|
||||
it('05-02', async () => {
|
||||
await browser.get('#/05-02');
|
||||
|
||||
const button = element(by.tagName('sg-app > toh-hero-button > button'));
|
||||
expect(await button.getText()).toBe('Hero button');
|
||||
});
|
||||
|
||||
it('05-03', async () => {
|
||||
await browser.get('#/05-03');
|
||||
|
||||
const button = element(by.tagName('sg-app > toh-hero-button > button'));
|
||||
expect(await button.getText()).toBe('Hero button');
|
||||
});
|
||||
|
||||
it('05-04', async () => {
|
||||
await browser.get('#/05-04');
|
||||
|
||||
const h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
|
||||
expect(await h2.getText()).toBe('My Heroes');
|
||||
});
|
||||
|
||||
it('05-12', async () => {
|
||||
await browser.get('#/05-12');
|
||||
|
||||
const button = element(by.tagName('sg-app > toh-hero-button > button'));
|
||||
expect(await button.getText()).toBe('OK');
|
||||
});
|
||||
|
||||
it('05-13', async () => {
|
||||
await browser.get('#/05-13');
|
||||
|
||||
const button = element(by.tagName('sg-app > toh-hero-button > button'));
|
||||
expect(await button.getText()).toBe('OK');
|
||||
});
|
||||
|
||||
it('05-14', async () => {
|
||||
await browser.get('#/05-14');
|
||||
|
||||
const toast = element(by.tagName('sg-app > toh-toast'));
|
||||
expect(await toast.getText()).toBe('...');
|
||||
});
|
||||
|
||||
it('05-15', async () => {
|
||||
await browser.get('#/05-15');
|
||||
|
||||
const heroList = element(by.tagName('sg-app > toh-hero-list'));
|
||||
expect(await heroList.getText()).toBe('...');
|
||||
});
|
||||
|
||||
it('05-16', async () => {
|
||||
await browser.get('#/05-16');
|
||||
|
||||
const hero = element(by.tagName('sg-app > toh-hero'));
|
||||
expect(await hero.getText()).toBe('...');
|
||||
});
|
||||
|
||||
it('05-17', async () => {
|
||||
await browser.get('#/05-17');
|
||||
|
||||
const section = element(by.tagName('sg-app > toh-hero-list > section'));
|
||||
expect(await section.getText()).toContain('Our list of heroes');
|
||||
expect(await section.getText()).toContain('Total powers');
|
||||
expect(await section.getText()).toContain('Average power');
|
||||
});
|
||||
|
||||
it('06-01', async () => {
|
||||
await browser.get('#/06-01');
|
||||
|
||||
const div = element(by.tagName('sg-app > div[tohhighlight]'));
|
||||
expect(await div.getText()).toBe('Bombasta');
|
||||
});
|
||||
|
||||
it('06-03', async () => {
|
||||
await browser.get('#/06-03');
|
||||
|
||||
const input = element(by.tagName('input[tohvalidator]'));
|
||||
expect(await input.isPresent()).toBe(true);
|
||||
});
|
||||
|
||||
// temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
|
||||
xit('07-01', async () => {
|
||||
await browser.get('#/07-01');
|
||||
|
||||
const lis = element.all(by.tagName('sg-app > ul > li'));
|
||||
expect(await lis.get(0).getText()).toBe('Windstorm');
|
||||
expect(await lis.get(1).getText()).toBe('Bombasto');
|
||||
expect(await lis.get(2).getText()).toBe('Magneta');
|
||||
expect(await lis.get(3).getText()).toBe('Tornado');
|
||||
});
|
||||
|
||||
it('07-04', async () => {
|
||||
await browser.get('#/07-04');
|
||||
|
||||
const pre = element(by.tagName('toh-app > pre'));
|
||||
expect(await pre.getText()).toContain('[]');
|
||||
});
|
||||
|
||||
it('09-01', async () => {
|
||||
await browser.get('#/09-01');
|
||||
|
||||
const button = element(by.tagName('sg-app > toh-hero-button > button'));
|
||||
expect(await button.getText()).toBe('OK');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
import {HeroService} from './heroes';
|
||||
|
||||
@Component({
|
||||
selector: 'toh-app',
|
||||
template: `
|
||||
<toh-heroes></toh-heroes>
|
||||
`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
providers: [HeroService],
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {NgModule} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroesComponent} from './heroes/heroes.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
// #enddocregion
|
||||
RouterModule.forChild([{path: '01-01', component: AppComponent}]),
|
||||
// #docregion
|
||||
],
|
||||
declarations: [AppComponent, HeroesComponent],
|
||||
exports: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
// #enddocregion
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
// #docregion
|
||||
/* avoid */
|
||||
import {Component, NgModule, OnInit} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||
|
||||
interface Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<h1>{{title}}</h1>
|
||||
<pre>{{heroes | json}}</pre>
|
||||
`,
|
||||
styleUrls: ['../app.component.css'],
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
title = 'Tour of Heroes';
|
||||
|
||||
heroes: Hero[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
getHeroes().then((heroes) => (this.heroes = heroes));
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [AppComponent],
|
||||
exports: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
const HEROES: Hero[] = [
|
||||
{id: 1, name: 'Bombasto'},
|
||||
{id: 2, name: 'Tornado'},
|
||||
{id: 3, name: 'Magneta'},
|
||||
];
|
||||
|
||||
function getHeroes(): Promise<Hero[]> {
|
||||
return Promise.resolve(HEROES); // TODO: get hero data from the server;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// #docregion
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
|
||||
import {Hero, HeroService} from './shared';
|
||||
|
||||
@Component({
|
||||
selector: 'toh-heroes',
|
||||
template: `
|
||||
<pre>{{heroes | json}}</pre>
|
||||
`,
|
||||
standalone: false,
|
||||
})
|
||||
export class HeroesComponent {
|
||||
heroes: Hero[] = [];
|
||||
|
||||
private heroService = inject(HeroService);
|
||||
|
||||
constructor() {
|
||||
this.heroService.getHeroes().then((heroes) => (this.heroes = heroes));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './shared';
|
||||
export * from './heroes.component';
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// #docregion
|
||||
export interface Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
import {HEROES} from './mock-heroes';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
getHeroes() {
|
||||
return Promise.resolve(HEROES);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export * from './hero.model';
|
||||
export * from './hero.service';
|
||||
export * from './mock-heroes';
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// #docregion
|
||||
import {Hero} from './hero.model';
|
||||
|
||||
export const HEROES: Hero[] = [
|
||||
{id: 1, name: 'Bombasto'},
|
||||
{id: 2, name: 'Tornado'},
|
||||
{id: 3, name: 'Magneta'},
|
||||
];
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// #docregion
|
||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||
|
||||
import {AppModule} from './app/app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'toh-app',
|
||||
template: `
|
||||
Tour of Heroes
|
||||
`,
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {NgModule} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
// #enddocregion
|
||||
RouterModule.forChild([{path: '02-05', component: AppComponent}]),
|
||||
// #docregion
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
exports: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
// #enddocregion
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import {AppComponent} from './app/app.component';
|
||||
import {bootstrapApplication} from '@angular/platform-browser';
|
||||
|
||||
bootstrapApplication(AppComponent);
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: `
|
||||
<toh-hero></toh-hero>
|
||||
<admin-users></admin-users>
|
||||
`,
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroComponent} from './heroes';
|
||||
import {UsersComponent} from './users';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '02-07', component: AppComponent}])],
|
||||
declarations: [AppComponent, HeroComponent, UsersComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
// HeroComponent is in the Tour of Heroes feature
|
||||
@Component({
|
||||
selector: 'hero',
|
||||
template: '',
|
||||
})
|
||||
export class HeroComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
// #enddocregion example
|
||||
template: '<div>hero component</div>',
|
||||
// #docregion example
|
||||
selector: 'toh-hero',
|
||||
})
|
||||
export class HeroComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero.component';
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './users';
|
||||
export * from './app.component';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './users.component';
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
// UsersComponent is in an Admin feature
|
||||
@Component({
|
||||
selector: 'users',
|
||||
template: '',
|
||||
})
|
||||
export class UsersComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
// #enddocregion example
|
||||
template: '<div>users component</div>',
|
||||
// #docregion example
|
||||
selector: 'admin-users',
|
||||
})
|
||||
export class UsersComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: '<input type="text" tohValidate>',
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {InputHighlightDirective, ValidateDirective} from './shared';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '02-08', component: AppComponent}])],
|
||||
declarations: [AppComponent, InputHighlightDirective, ValidateDirective],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './shared';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './input-highlight.directive';
|
||||
export * from './validate.directive';
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// #docregion
|
||||
import {Directive, ElementRef, inject} from '@angular/core';
|
||||
|
||||
// eslint-disable-next-line @angular-eslint/directive-selector
|
||||
@Directive({
|
||||
selector: 'input',
|
||||
standalone: false,
|
||||
})
|
||||
/** Highlight the attached input text element in blue */
|
||||
export class InputHighlightDirective {
|
||||
private el = inject(ElementRef);
|
||||
constructor() {
|
||||
this.el.nativeElement.style.backgroundColor = 'powderblue';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// #docregion
|
||||
import {Directive} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
@Directive({
|
||||
selector: '[validate]',
|
||||
})
|
||||
export class ValidateDirective {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// #docregion
|
||||
import {Directive} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Directive({
|
||||
selector: '[tohValidate]',
|
||||
})
|
||||
export class ValidateDirective {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: '<toh-heroes></toh-heroes>',
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion example
|
||||
import {NgModule} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
// #enddocregion example
|
||||
import {RouterModule} from '@angular/router';
|
||||
// #docregion example
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroesComponent} from './heroes/heroes.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
// #enddocregion example
|
||||
RouterModule.forChild([{path: '04-08', component: AppComponent}]),
|
||||
// #docregion example
|
||||
],
|
||||
declarations: [AppComponent, HeroesComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
<div>This is heroes component</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'toh-heroes',
|
||||
templateUrl: './heroes.component.html',
|
||||
standalone: false,
|
||||
})
|
||||
export class HeroesComponent {}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: '<toh-heroes></toh-heroes>',
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroesComponent} from './heroes/heroes.component';
|
||||
import {SharedModule} from './shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
SharedModule,
|
||||
RouterModule.forChild([{path: '04-10', component: AppComponent}]),
|
||||
],
|
||||
declarations: [AppComponent, HeroesComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<!--#docregion-->
|
||||
<div>This is heroes component</div>
|
||||
<ul>
|
||||
<li *ngFor="let hero of filteredHeroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<toh-filter-text (changed)="filterChanged($event)"></toh-filter-text>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// #docregion
|
||||
import {Component, inject} from '@angular/core';
|
||||
|
||||
import {FilterTextService} from '../shared/filter-text/filter-text.service';
|
||||
|
||||
@Component({
|
||||
selector: 'toh-heroes',
|
||||
templateUrl: './heroes.component.html',
|
||||
standalone: false,
|
||||
})
|
||||
export class HeroesComponent {
|
||||
heroes = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'Bombasto'},
|
||||
{id: 3, name: 'Magneta'},
|
||||
{id: 4, name: 'Tornado'},
|
||||
];
|
||||
|
||||
filteredHeroes = this.heroes;
|
||||
|
||||
private filterService = inject(FilterTextService);
|
||||
|
||||
filterChanged(searchText: string) {
|
||||
this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// #docregion
|
||||
import {Component, EventEmitter, Output} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'toh-filter-text',
|
||||
template:
|
||||
'<input type="text" id="filterText" [(ngModel)]="filter" (keyup)="filterChanged($event)" />',
|
||||
standalone: false,
|
||||
})
|
||||
export class FilterTextComponent {
|
||||
@Output() changed: EventEmitter<string>;
|
||||
|
||||
filter = '';
|
||||
|
||||
constructor() {
|
||||
this.changed = new EventEmitter<string>();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.filter = '';
|
||||
}
|
||||
|
||||
filterChanged(event: any) {
|
||||
event.preventDefault();
|
||||
console.log(`Filter Changed: ${this.filter}`);
|
||||
this.changed.emit(this.filter);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class FilterTextService {
|
||||
constructor() {
|
||||
console.log('Created an instance of FilterTextService');
|
||||
}
|
||||
|
||||
filter(data: string, props: Array<string>, originalList: Array<any>) {
|
||||
let filteredList: any[];
|
||||
if (data && props && originalList) {
|
||||
data = data.toLowerCase();
|
||||
const filtered = originalList.filter((item) => {
|
||||
let match = false;
|
||||
for (const prop of props) {
|
||||
if (item[prop].toString().toLowerCase().indexOf(data) > -1) {
|
||||
match = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return match;
|
||||
});
|
||||
filteredList = filtered;
|
||||
} else {
|
||||
filteredList = originalList;
|
||||
}
|
||||
return filteredList;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// #docregion
|
||||
import {Pipe, PipeTransform} from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'initCaps',
|
||||
standalone: false,
|
||||
})
|
||||
export class InitCapsPipe implements PipeTransform {
|
||||
transform = (value: string) => value;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// #docregion
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
|
||||
import {FilterTextComponent} from './filter-text/filter-text.component';
|
||||
import {FilterTextService} from './filter-text/filter-text.service';
|
||||
import {InitCapsPipe} from './init-caps.pipe';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, FormsModule],
|
||||
declarations: [FilterTextComponent, InitCapsPipe],
|
||||
providers: [FilterTextService],
|
||||
exports: [CommonModule, FormsModule, FilterTextComponent, InitCapsPipe],
|
||||
})
|
||||
export class SharedModule {}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<toh-hero-button></toh-hero-button>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
templateUrl: './app.component.html',
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroButtonComponent} from './heroes';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '05-02', component: AppComponent}])],
|
||||
declarations: [AppComponent, HeroButtonComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './shared';
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// #docplaster
|
||||
import {Component} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
@Component({
|
||||
selector: 'tohHeroButton',
|
||||
templateUrl: './hero-button.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
<button type="button" class="hero-button">Hero button</button>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
selector: 'toh-hero-button',
|
||||
templateUrl: './hero-button.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button.component';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!-- avoid -->
|
||||
|
||||
<div tohHeroButton></div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<toh-hero-button></toh-hero-button>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
templateUrl: './app.component.html',
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroButtonComponent} from './heroes';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '05-03', component: AppComponent}])],
|
||||
declarations: [AppComponent, HeroButtonComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './shared';
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
@Component({
|
||||
selector: '[tohHeroButton]',
|
||||
templateUrl: './hero-button.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
<button type="button" class="hero-button">Hero button</button>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
selector: 'toh-hero-button',
|
||||
templateUrl: './hero-button.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button.component';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {HeroesComponent} from './heroes';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: '<toh-heroes></toh-heroes>',
|
||||
imports: [HeroesComponent],
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroesComponent} from './heroes';
|
||||
import {HeroService} from './heroes/shared';
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule, RouterModule.forChild([{path: '05-04', component: AppComponent}])],
|
||||
declarations: [AppComponent, HeroesComponent],
|
||||
exports: [AppComponent],
|
||||
providers: [HeroService],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import {Component, inject} from '@angular/core';
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
import {Hero, HeroService} from './shared';
|
||||
import {AsyncPipe, NgFor, NgIf, UpperCasePipe} from '@angular/common';
|
||||
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
@Component({
|
||||
selector: 'toh-heroes',
|
||||
template: `
|
||||
<div>
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
@for (hero of heroes | async; track hero) {
|
||||
<li (click)="selectedHero=hero">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
@if (selectedHero) {
|
||||
<div>
|
||||
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.heroes {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 15em;
|
||||
}
|
||||
.heroes li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.heroes .badge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #607D8B;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
height: 1.8em;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
imports: [NgFor, NgIf, AsyncPipe, UpperCasePipe],
|
||||
})
|
||||
export class HeroesComponent {
|
||||
selectedHero!: Hero;
|
||||
|
||||
private heroService = inject(HeroService);
|
||||
heroes: Observable<Hero[]> = this.heroService.getHeroes();
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
/* #docregion */
|
||||
.heroes {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.heroes li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heroes button {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
.heroes button:hover {
|
||||
color: #2c3a41;
|
||||
background-color: #e6e6e6;
|
||||
left: .1em;
|
||||
}
|
||||
|
||||
.heroes button:active {
|
||||
background-color: #525252;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.heroes button.selected {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroes button.selected:hover {
|
||||
background-color: #505050;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroes button.selected:active {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroes .badge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #405061;
|
||||
line-height: 1em;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.heroes .name {
|
||||
align-self: center;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div>
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
@for (hero of heroes | async; track hero) {
|
||||
<li>
|
||||
<button type="button" (click)="selectedHero=hero">
|
||||
<span class="badge">{{ hero.id }}</span>
|
||||
<span class="name">{{ hero.name }}</span>
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
@if (selectedHero) {
|
||||
<div>
|
||||
<h2>{{ selectedHero.name | uppercase }} is my hero</h2>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import {Component, inject} from '@angular/core';
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
import {Hero, HeroService} from './shared';
|
||||
import {AsyncPipe, NgFor, NgIf, UpperCasePipe} from '@angular/common';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
selector: 'toh-heroes',
|
||||
templateUrl: './heroes.component.html',
|
||||
styleUrls: ['./heroes.component.css'],
|
||||
imports: [NgFor, NgIf, AsyncPipe, UpperCasePipe],
|
||||
})
|
||||
export class HeroesComponent {
|
||||
selectedHero!: Hero;
|
||||
|
||||
private heroService = inject(HeroService);
|
||||
heroes: Observable<Hero[]> = this.heroService.getHeroes();
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './shared';
|
||||
export * from './heroes.component';
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// #docregion
|
||||
export interface Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import {inject, Injectable} from '@angular/core';
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
import {Hero} from './hero.model';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
getHeroes(): Observable<Hero[]> {
|
||||
return this.http.get<Hero[]>('api/heroes');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './hero.model';
|
||||
export * from './hero.service';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {HeroButtonComponent} from './heroes/shared/hero-button/hero-button.component';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: '<toh-hero-button label="OK"></toh-hero-button>',
|
||||
imports: [HeroButtonComponent],
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroButtonComponent} from './heroes';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '05-12', component: AppComponent}])],
|
||||
declarations: [AppComponent, HeroButtonComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './shared';
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// #docregion
|
||||
import {Component, EventEmitter} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid */
|
||||
|
||||
@Component({
|
||||
selector: 'toh-hero-button',
|
||||
template: `<button type="button"></button>`,
|
||||
inputs: ['label'],
|
||||
outputs: ['heroChange'],
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
heroChange = new EventEmitter<any>();
|
||||
label: string = '';
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// #docregion
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
selector: 'toh-hero-button',
|
||||
template: `<button type="button">{{label}}</button>`,
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
@Output() heroChange = new EventEmitter<any>();
|
||||
@Input() label = '';
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button.component';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!-- avoid -->
|
||||
|
||||
<toh-hero-button labelAttribute="OK" (changeEvent)="doSomething()">
|
||||
</toh-hero-button>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<toh-hero-button label="OK" (change)="doSomething()">
|
||||
</toh-hero-button>
|
||||
|
||||
<!-- `heroHighlight` is both the directive name and the data-bound aliased property name -->
|
||||
<h3 heroHighlight="skyblue">The Great Bombasto</h3>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
templateUrl: './app.component.html',
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {
|
||||
doSomething() {}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {HeroButtonComponent, HeroHighlightDirective} from './heroes';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '05-13', component: AppComponent}])],
|
||||
declarations: [AppComponent, HeroButtonComponent, HeroHighlightDirective],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './shared';
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
// #docregion example
|
||||
/* avoid pointless aliasing */
|
||||
|
||||
@Component({
|
||||
selector: 'toh-hero-button',
|
||||
template: `<button type="button">{{label}}</button>`,
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
// Pointless aliases
|
||||
@Output('heroChangeEvent') heroChange = new EventEmitter<any>();
|
||||
@Input('labelAttribute') label!: string;
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// #docregion
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
|
||||
// #docregion example
|
||||
@Component({
|
||||
selector: 'toh-hero-button',
|
||||
template: `<button type="button" >{{label}}</button>`,
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
// No aliases
|
||||
@Output() heroChange = new EventEmitter<any>();
|
||||
@Input() label = '';
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './hero-button.component';
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// #docregion
|
||||
import {Directive, ElementRef, inject, Input, OnChanges} from '@angular/core';
|
||||
|
||||
// eslint-disable-next-line @angular-eslint/directive-selector
|
||||
@Directive({
|
||||
selector: '[heroHighlight]',
|
||||
})
|
||||
export class HeroHighlightDirective implements OnChanges {
|
||||
// Aliased because `color` is a better property name than `heroHighlight`
|
||||
@Input('heroHighlight') color = '';
|
||||
|
||||
private el = inject(ElementRef);
|
||||
|
||||
ngOnChanges() {
|
||||
this.el.nativeElement.style.backgroundColor = this.color || 'yellow';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './hero-button';
|
||||
export * from './hero-highlight.directive';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './heroes';
|
||||
export * from './app.component';
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sg-app',
|
||||
template: `<toh-toast></toh-toast>`,
|
||||
standalone: false,
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppComponent} from './app.component';
|
||||
import {ToastComponent} from './shared';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([{path: '05-14', component: AppComponent}])],
|
||||
declarations: [AppComponent, ToastComponent],
|
||||
exports: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './shared';
|
||||
export * from './app.component';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './toast';
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue