Skip to content

Commit 21eb7c7

Browse files
alexis-landrieu-avanadealexis-landrieu-avanade
committed
feat: Add new examples and use cases. Fix some typos.
1 parent ab722fa commit 21eb7c7

14 files changed

+151
-75
lines changed

‎README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,16 @@ ChangeDetectionRef (https://angular.io/api/core/ChangeDetectorRef)
9393
ViewRef​ (https://angular.io/api/core/ViewRef)
9494
> Represents an Angular view, specifically the host view that is defined by a component. Also serves as the base class that adds destroy methods for embedded views.
9595
96-
EmbededViewRef​ (https://angular.io/api/core/EmbeddedViewRef)
96+
EmbeddedViewRef (https://angular.io/api/core/EmbeddedViewRef)
9797
> Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.
9898
9999
- [view_ref](https://github.com/angular/angular/blob/master/packages/core/src/linker/view_ref.ts)
100100

101+
ComponentRef (https://angular.io/api/core/ComponentRef)
102+
> Represents a component created by a ComponentFactory. Provides access to the component instance and related objects, and provides the means of destroying the instance.
103+
104+
- [component_factory](https://github.com/angular/angular/blob/master/packages/core/src/linker/component_factory.ts#L24)
105+
101106
```typescript
102107
export abstract class ViewRef extends ChangeDetectorRef {
103108
...

‎src/app/app.component.html

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -399,42 +399,6 @@ <h2>Demo</h2>
399399
</div>
400400

401401
<!-- Resources -->
402-
<h2>Resources</h2>
403-
<p>Here are some links to help you get started:</p>
404-
405-
<div class="card-container">
406-
<a
407-
class="card"
408-
target="_blank"
409-
rel="noopener"
410-
href="https://angular.io/tutorial"
411-
>
412-
<svg
413-
class="material-icons"
414-
xmlns="http://www.w3.org/2000/svg"
415-
width="24"
416-
height="24"
417-
viewBox="0 0 24 24"
418-
>
419-
<path
420-
d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"
421-
/>
422-
</svg>
423-
424-
<span>Learn Angular</span>
425-
426-
<svg
427-
class="material-icons"
428-
xmlns="http://www.w3.org/2000/svg"
429-
width="24"
430-
height="24"
431-
viewBox="0 0 24 24"
432-
>
433-
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
434-
</svg>
435-
</a>
436-
</div>
437-
438402
<!-- Terminal -->
439403
<!-- Links -->
440404
<!-- Footer -->

‎src/app/example1/example1.component.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<pre>
2+
<h4>Reminder</h4>
3+
24
> Native HTML Element
35
<button #view1>Simple Button {{checkView(view1, "Native HTML Element")}}</button>
46

57
> Component
68
<app-simple-button #view2>{{checkView(view2, "Component")}}</app-simple-button>
79

810
> Component with NgIf (structural directives)
9-
<app-simple-button #view3 *ngIf="true">{{checkView(view3, "Component with NgIf")}}</app-simple-button>
11+
<app-simple-button #view3 *ngIf="true">{{ checkView(view3, "Component with NgIf") }}</app-simple-button>
1012

1113
> Template
1214
<template #view4>
@@ -17,15 +19,15 @@
1719
> NgTemplate
1820
<ng-template #view5>
1921
<button>Simple Button</button>
20-
{{checkView(view5, "NgTemplate")}}
22+
{{ checkView(view5, "NgTemplate") }}
2123
</ng-template>
2224

2325
> NgContainer
2426
<ng-container #view6>
2527
<button>Simple Button</button>
26-
{{checkView(view6, "NgContainer")}}
28+
{{ checkView(view6, "NgContainer") }}
2729
</ng-container>
2830

2931
> NgContent
3032
<ng-content #view7></ng-content>
31-
</pre>
33+
</pre>

‎src/app/example1/example1.component.sass

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:host-context(.terminal)
2-
pre, p
2+
pre, p, h4
33
color: white
44

5-
pre, p
5+
pre, p, h4
66
padding: 0 1rem 1rem
77
margin: 0

‎src/app/example1/example1.component.ts

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Component, ViewEncapsulation, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
2-
import { SimpleButtonComponent } from './simple-button/simple-button.component';
1+
import { Component, ViewContainerRef } from '@angular/core';
32
import { AComponent } from './a-component';
43

54
@Component({
@@ -8,31 +7,8 @@ import { AComponent } from './a-component';
87
styleUrls: ['./example1.component.sass']
98
})
109
export class Example1Component extends AComponent {
11-
12-
// TemplateRef
13-
// @ViewChild('view1', { read: TemplateRef, static: true }) template1: TemplateRef<HTMLButtonElement>;
14-
// @ViewChild('view2', { read: TemplateRef, static: true }) template2: TemplateRef<SimpleButtonComponent>;
15-
// @ViewChild('view3', { read: TemplateRef, static: false }) template3: TemplateRef<SimpleButtonComponent>;
16-
17-
// ViewContainerRef
18-
// @ViewChild('view1', { read: ViewContainerRef, static: true }) viewRef1: ViewContainerRef;
19-
// @ViewChild('view2', { read: ViewContainerRef, static: true }) viewRef2: ViewContainerRef;
20-
// @ViewChild('view3', { read: ViewContainerRef, static: false }) viewRef3: ViewContainerRef;
21-
2210
constructor(public viewContainerRef: ViewContainerRef) {
2311
super();
2412
this.checkView(this.viewContainerRef, 'Host viewContainerRef');
2513
}
26-
27-
ngAfterViewInit(): void {
28-
super.ngAfterViewInit();
29-
// console.log('TemplateRef n°1', this.template1);
30-
// console.log('TemplateRef n°2', this.template2);
31-
// console.log('TemplateRef n°3', this.template3);
32-
33-
34-
// console.log('ViewContainerRef n°1', this.viewRef1);
35-
// console.log('ViewContainerRef n°2', this.viewRef2);
36-
// console.log('ViewContainerRef n°3', this.viewRef3);
37-
}
3814
}

‎src/app/example2/example2.component.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<pre>
2+
<h4>Template & Container Use Cases</h4>
3+
4+
<!-- #region uc1 -->
5+
> Use Case n°1
6+
<div *ngIf="true">
7+
<p>My amazing content !</p>
8+
</div>
9+
<!-- #endregion uc1 -->
10+
11+
<!-- #region uc2 -->
12+
> Use Case n°2 items ? ngIf
13+
<div *ngFor="let item of ['content']">
14+
<p>My amazing {{item}} !</p>
15+
</div>
16+
<!-- #endregion uc2 -->
17+
18+
<!-- #region uc3 -->
19+
> Use Case n° 3 (extra div)
20+
<div *ngIf="true">
21+
<div *ngFor="let item of ['content']">
22+
<p>My amazing {{item}} !</p>
23+
</div>
24+
</div>
25+
<!-- #endregion uc3 -->
26+
27+
<!-- #region uc4 -->
28+
> Use Case n° 4 (use a container)
29+
<ng-container *ngIf="true">
30+
<div *ngFor="let item of ['content']">
31+
<p>My amazing {{item}} !</p>
32+
</div>
33+
</ng-container>
34+
<!-- #endregion uc4 -->
35+
36+
<!-- #region uc5 -->
37+
> Use Case n° 5.1 (use a container+template)
38+
<ng-container *ngIf="false; else amazingTemplate">My *ngIf condition content</ng-container>
39+
40+
> Use Case n° 5.2 (use a container+template)
41+
<ng-container *ngTemplateOutlet="amazingTemplate"></ng-container>
42+
43+
<ng-template #amazingTemplate>
44+
<div *ngFor="let item of ['content']">
45+
<p>My amazing {{item}} !</p>
46+
</div>
47+
</ng-template>
48+
<!-- #endregion uc5 -->
49+
</pre>

‎src/app/example2/example2.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-example2',
5+
templateUrl: './example2.component.html',
6+
styleUrls: ['../example1/example1.component.sass']
7+
})
8+
export class Example2Component {
9+
constructor() { }
10+
}

‎src/app/example2/example2.module.ts

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

‎src/app/example3/example3.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<h4>Dynamic contents</h4>
2+
3+
// Live Coding Example

‎src/app/example3/example3.component.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, OnInit, AfterViewInit, ElementRef, ViewContainerRef, ComponentRef } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-example3',
5+
templateUrl: './example3.component.html',
6+
styleUrls: ['../example1/example1.component.sass']
7+
})
8+
export class Example3Component implements OnInit, AfterViewInit {
9+
// TemplateRef
10+
// @ViewChild('template1', { read: TemplateRef, static: true }) template1: TemplateRef<HTMLButtonElement>;
11+
12+
// ViewContainerRef
13+
// @ViewChild('viewcontainer1', { read: ViewContainerRef, static: true }) viewcontainer1: ViewContainerRef;
14+
15+
constructor(public viewContainerRef: ViewContainerRef, public hostRef: ElementRef, public compRef: ComponentRef<Example3Component>) {
16+
console.log('host ElementRef', hostRef);
17+
console.log('host ViewContainerRef', viewContainerRef);
18+
console.log('host ComponentRef', compRef);
19+
}
20+
21+
ngOnInit(): void { }
22+
23+
ngAfterViewInit() {
24+
// console.log('TemplateRef', this.template1);
25+
// console.log('ViewContainerRef', this.viewcontainer1);
26+
}
27+
}

0 commit comments

Comments
 (0)