errors: {{ control.errors | json }}
5 | status: {{ control.status | json }}
6 |
--------------------------------------------------------------------------------
/libs/section2/src/lib/lesson1/completed/lesson1-completed-simple-built-in-validators/lesson1-completed-simple-built-in-validators.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormControl, Validators } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'forms-course-lesson1-completed-simple-built-in-validators',
6 | templateUrl: './lesson1-completed-simple-built-in-validators.component.html',
7 | styleUrls: ['./lesson1-completed-simple-built-in-validators.component.css']
8 | })
9 | export class Lesson1CompletedSimpleBuiltInValidatorsComponent
10 | implements OnInit {
11 | control = new FormControl('', [
12 | Validators.required,
13 | Validators.minLength(5),
14 | Validators.email
15 | ]);
16 |
17 | constructor() {}
18 |
19 | ngOnInit() {}
20 | }
21 |
--------------------------------------------------------------------------------
/libs/section2/src/lib/lesson1/hero-validation/hero-validation.component.css:
--------------------------------------------------------------------------------
1 | legend {
2 | background-color: #000;
3 | color: #fff;
4 | padding: 3px 6px;
5 | text-align: center;
6 | }
7 |
8 | fieldset {
9 | border-width: 3px;
10 | border-style: solid;
11 | border-radius: 5px;
12 | margin: 10px;
13 | padding: 10px;
14 | }
15 |
16 | label {
17 | width: 200px;
18 | }
19 |
20 | td {
21 | border-style: solid;
22 | border-width: 2px;
23 | }
24 |
25 | pre {
26 | margin: 0;
27 | }
28 |
--------------------------------------------------------------------------------
/libs/section2/src/lib/lesson1/hero-validation/hero-validation.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HeroValidationComponent } from './hero-validation.component';
4 |
5 | describe('HeroValidationComponent', () => {
6 | let component: HeroValidationComponent;
7 | let fixture: ComponentFixtureerrors: [[ show errors here ]]5 |
status: [[ show form status here ]]6 | -------------------------------------------------------------------------------- /libs/section2/src/lib/lesson1/simple-built-in-validators/simple-built-in-validators.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SimpleBuiltInValidatorsComponent } from './simple-built-in-validators.component'; 4 | 5 | describe('SimpleBuiltInValidatorsComponent', () => { 6 | let component: SimpleBuiltInValidatorsComponent; 7 | let fixture: ComponentFixture
2 | lesson5-shell works! 3 |
4 | -------------------------------------------------------------------------------- /libs/section2/src/lib/lesson5/lesson5-shell/lesson5-shell.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Lesson5ShellComponent } from './lesson5-shell.component'; 4 | 5 | describe('Lesson5ShellComponent', () => { 6 | let component: Lesson5ShellComponent; 7 | let fixture: ComponentFixture4 | Your changes will be discarded if you leave this page. 5 |
6 |7 | Are you sure you want to leave? 8 |
9 |3 | In this lesson, use table form and grid components to create a client-side 4 | table. 5 |
6 | 7 |8 | Check out the resources in the `+state` directory for this section to help 9 | with the functionality. There is an NgRx implementation in `+state`, but the 10 | important part is to know that there's a selector called `heroSelector` that 11 | will provide an Observable of all available heroes. 12 |
13 |3 | In this lesson, use the same table form and grid components to create a 4 | server-side table. 5 |
6 | 7 |8 | Check out the utils and the HeroService in the `+state` directory for this 9 | section to help with addressing these. Use the HeroService for mocking out 10 | your API calls. 11 |
12 |
2 |
4 |
--------------------------------------------------------------------------------
/libs/ui-common/src/lib/code-preview/code-preview.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CodePreviewComponent } from './code-preview.component';
4 |
5 | describe('CodePreviewComponent', () => {
6 | let component: CodePreviewComponent;
7 | let fixture: ComponentFixture