LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: fix issues with Angular code samples

Browse Source
This commit is contained in:
Corbin Crutchley
2023-12-24 16:42:53 -08:00
parent 9f23d6be31
commit 9eea6c8db9
47 changed files with 128 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-built-in-pipes-47/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { import {
@@ -45,7 +45,7 @@ class FileDateComponent {
</button> </button>
`, `,
}) })
export class FileComponent implements OnInit, OnDestroy { class FileComponent implements OnInit, OnDestroy {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -95,7 +95,7 @@ export class FileComponent implements OnInit, OnDestroy {
</div> </div>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
fileTrackBy(index: number, file: File) { fileTrackBy(index: number, file: File) {

8
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-computed-values-47/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { import {
@@ -37,7 +37,7 @@ class FormatReadableDatePipe implements PipeTransform {
</span> </span>
`, `,
}) })
export class FileDateComponent { class FileDateComponent {
@Input() inputDate!: Date; @Input() inputDate!: Date;
} }
@@ -61,7 +61,7 @@ export class FileDateComponent {
</button> </button>
`, `,
}) })
export class FileComponent implements OnInit, OnDestroy { class FileComponent implements OnInit, OnDestroy {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -111,7 +111,7 @@ export class FileComponent implements OnInit, OnDestroy {
</div> </div>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
fileTrackBy(index: number, file: File) { fileTrackBy(index: number, file: File) {

6
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-derived-challenge-49/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, Pipe, PipeTransform } from "@angular/core"; import { Component, Input, Pipe, PipeTransform } from "@angular/core";
@@ -28,7 +28,7 @@ class FormatBytesPipe implements PipeTransform {
imports: [FormatBytesPipe], imports: [FormatBytesPipe],
template: `<p>{{ bytes | formatBytes }}</p>`, template: `<p>{{ bytes | formatBytes }}</p>`,
}) })
export class DisplaySizeComponent { class DisplaySizeComponent {
@Input() bytes!: number; @Input() bytes!: number;
} }
@@ -81,6 +81,6 @@ export class DisplaySizeComponent {
</table> </table>
`, `,
}) })
export class AppComponent {} class AppComponent {}
bootstrapApplication(AppComponent); bootstrapApplication(AppComponent);

8
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-multi-input-pipes-47/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { import {
@@ -33,7 +33,7 @@ class FormatDatePipe implements PipeTransform {
</span> </span>
`, `,
}) })
export class FileDateComponent { class FileDateComponent {
@Input() inputDate!: Date; @Input() inputDate!: Date;
} }
@@ -57,7 +57,7 @@ export class FileDateComponent {
</button> </button>
`, `,
}) })
export class FileComponent implements OnInit, OnDestroy { class FileComponent implements OnInit, OnDestroy {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -107,7 +107,7 @@ export class FileComponent implements OnInit, OnDestroy {
</div> </div>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
fileTrackBy(index: number, file: File) { fileTrackBy(index: number, file: File) {

2
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-non-prop-derived-48/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Pipe, PipeTransform } from "@angular/core"; import { Component, Pipe, PipeTransform } from "@angular/core";

8
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-prop-listening-46/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { import {
@@ -18,7 +18,7 @@ import { NgFor, NgIf } from "@angular/common";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnChanges { class FileDateComponent implements OnChanges {
@Input() inputDate!: Date; @Input() inputDate!: Date;
dateStr = ""; dateStr = "";
@@ -100,7 +100,7 @@ export class FileDateComponent implements OnChanges {
</button> </button>
`, `,
}) })
export class FileComponent implements OnInit, OnDestroy { class FileComponent implements OnInit, OnDestroy {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -150,7 +150,7 @@ export class FileComponent implements OnInit, OnDestroy {
</div> </div>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
fileTrackBy(index: number, file: File) { fileTrackBy(index: number, file: File) {

8
content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-refreshing-file-date-45/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { import {
@@ -16,7 +16,7 @@ import { NgFor, NgIf } from "@angular/common";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
dateStr = ""; dateStr = "";
@@ -92,7 +92,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent implements OnInit, OnDestroy { class FileComponent implements OnInit, OnDestroy {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -142,7 +142,7 @@ export class FileComponent implements OnInit, OnDestroy {
</div> </div>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
fileTrackBy(index: number, file: File) { fileTrackBy(index: number, file: File) {

8
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-conditional-branches-19/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core"; import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -88,7 +88,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -116,6 +116,6 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

8
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-conditional-date-18/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core"; import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -86,7 +86,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -114,6 +114,6 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

6
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-conditional-render-17/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input } from "@angular/core"; import { Component, Input } from "@angular/core";
@@ -10,7 +10,7 @@ import { NgIf } from "@angular/common";
imports: [NgIf], imports: [NgIf],
template: `<div><p *ngIf="bool">Text here</p></div>`, template: `<div><p *ngIf="bool">Text here</p></div>`,
}) })
export class ConditionalRenderComponent { class ConditionalRenderComponent {
@Input() bool!: boolean; @Input() bool!: boolean;
} }
@@ -27,6 +27,6 @@ export class ConditionalRenderComponent {
</div> </div>
`, `,
}) })
export class AppComponent {} class AppComponent {}
bootstrapApplication(AppComponent); bootstrapApplication(AppComponent);

6
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-dynamic-challenge-25/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output } from "@angular/core"; import { Component, Input, EventEmitter, Output } from "@angular/core";
@@ -18,7 +18,7 @@ import { NgFor, NgIf } from "@angular/common";
</div> </div>
`, `,
}) })
export class ExpandableDropdownComponent { class ExpandableDropdownComponent {
@Input() name!: string; @Input() name!: string;
@Input() expanded!: boolean; @Input() expanded!: boolean;
@Output() toggle = new EventEmitter(); @Output() toggle = new EventEmitter();
@@ -40,7 +40,7 @@ export class ExpandableDropdownComponent {
</div> </div>
`, `,
}) })
export class SidebarComponent { class SidebarComponent {
categories = [ categories = [
"Movies", "Movies",
"Pictures", "Pictures",

4
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-keyed-demo-22/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -21,7 +21,7 @@ import { NgFor } from "@angular/common";
</div> </div>
`, `,
}) })
export class WordListComponent { class WordListComponent {
words: Word[] = []; words: Word[] = [];
wordTrackBy(index: number, word: Word) { wordTrackBy(index: number, word: Word) {

8
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-rendering-lists-20/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core"; import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgFor, NgIf } from "@angular/common";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -88,7 +88,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -116,7 +116,7 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
onSelected(idx: number) { onSelected(idx: number) {

4
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-unkeyed-demo-21/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -21,7 +21,7 @@ import { NgFor } from "@angular/common";
</div> </div>
`, `,
}) })
export class WordListComponent { class WordListComponent {
words: Word[] = []; words: Word[] = [];
addWord() { addWord() {

8
content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-using-it-together-24/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core"; import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgFor, NgIf } from "@angular/common";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -88,7 +88,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@Input() isSelected!: boolean; @Input() isSelected!: boolean;
@@ -122,7 +122,7 @@ export class FileComponent {
</div> </div>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
fileTrackBy(index: number, file: File) { fileTrackBy(index: number, file: File) {

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-attribute-binding-10/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit } from "@angular/core";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
dateStr = this.formatDate(new Date()); dateStr = this.formatDate(new Date());
labelText = this.formatReadableDate(new Date()); labelText = this.formatReadableDate(new Date());

8
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-component-hierarchy-4/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
@@ -7,7 +7,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
standalone: true, standalone: true,
template: `<span>12/03/21</span>`, template: `<span>12/03/21</span>`,
}) })
export class FileDateComponent {} class FileDateComponent {}
@Component({ @Component({
selector: "file", selector: "file",
@@ -19,7 +19,7 @@ export class FileDateComponent {}
</div> </div>
`, `,
}) })
export class FileComponent {} class FileComponent {}
@Component({ @Component({
selector: "file-list", selector: "file-list",
@@ -33,6 +33,6 @@ export class FileComponent {}
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

6
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-component-reuse-3/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
@@ -11,7 +11,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
</div> </div>
`, `,
}) })
export class FileComponent {} class FileComponent {}
@Component({ @Component({
selector: "file-list", selector: "file-list",
@@ -25,6 +25,6 @@ export class FileComponent {}
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-display-8/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component } from "@angular/core";
standalone: true, standalone: true,
template: `<span>{{ dateStr }}</span>`, template: `<span>{{ dateStr }}</span>`,
}) })
export class FileDateComponent { class FileDateComponent {
dateStr = this.formatDate(); dateStr = this.formatDate();
formatDate() { formatDate() {

8
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-event-binding-14/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, Input } from "@angular/core"; import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -85,7 +85,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent { class FileComponent {
isSelected = false; isSelected = false;
selectFile() { selectFile() {
this.isSelected = !this.isSelected; this.isSelected = !this.isSelected;
@@ -107,6 +107,6 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-extracted-logic-6/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
@@ -7,7 +7,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
standalone: true, standalone: true,
template: `<span>12/03/21</span>`, template: `<span>12/03/21</span>`,
}) })
export class FileDateComponent { class FileDateComponent {
dateStr = this.formatDate(); dateStr = this.formatDate();
formatDate() { formatDate() {
const today = new Date(); const today = new Date();

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-inline-logic-5/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
@@ -7,7 +7,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
standalone: true, standalone: true,
template: `<span>12/03/21</span>`, template: `<span>12/03/21</span>`,
}) })
export class FileDateComponent { class FileDateComponent {
dateStr = `${ dateStr = `${
new Date().getMonth() + 1 new Date().getMonth() + 1
}/${new Date().getDate()}/${new Date().getFullYear()}`; }/${new Date().getDate()}/${new Date().getFullYear()}`;

6
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-intro-challenge-16/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output } from "@angular/core"; import { Component, Input, EventEmitter, Output } from "@angular/core";
@@ -16,7 +16,7 @@ import { Component, Input, EventEmitter, Output } from "@angular/core";
</div> </div>
`, `,
}) })
export class ExpandableDropdownComponent { class ExpandableDropdownComponent {
@Input() name!: string; @Input() name!: string;
@Input() expanded!: boolean; @Input() expanded!: boolean;
@Output() toggle = new EventEmitter(); @Output() toggle = new EventEmitter();
@@ -62,7 +62,7 @@ export class ExpandableDropdownComponent {
</div> </div>
`, `,
}) })
export class SidebarComponent { class SidebarComponent {
moviesExpanded = true; moviesExpanded = true;
picturesExpanded = false; picturesExpanded = false;
conceptsExpanded = false; conceptsExpanded = false;

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-live-display-9/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit } from "@angular/core";
standalone: true, standalone: true,
template: `<span>{{ dateStr }}</span>`, template: `<span>{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
dateStr = this.formatDate(new Date()); dateStr = this.formatDate(new Date());
ngOnInit() { ngOnInit() {

8
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-multi-props-12/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, Input } from "@angular/core"; import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
dateStr = this.formatDate(new Date()); dateStr = this.formatDate(new Date());
labelText = this.formatReadableDate(new Date()); labelText = this.formatReadableDate(new Date());
@@ -75,7 +75,7 @@ export class FileDateComponent implements OnInit {
</div> </div>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
} }
@@ -92,6 +92,6 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

8
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-object-props-13/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, Input } from "@angular/core"; import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -80,7 +80,7 @@ export class FileDateComponent implements OnInit {
</div> </div>
`, `,
}) })
export class FileComponent { class FileComponent {
inputDate = new Date(); inputDate = new Date();
@Input() fileName!: string; @Input() fileName!: string;
@Input() href!: string; @Input() href!: string;
@@ -98,6 +98,6 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

8
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-outputs-15/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core"; import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
@Input() inputDate!: Date; @Input() inputDate!: Date;
/** /**
@@ -85,7 +85,7 @@ export class FileDateComponent implements OnInit {
</button> </button>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
// `href` is temporarily unused // `href` is temporarily unused
@Input() href!: string; @Input() href!: string;
@@ -128,7 +128,7 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent { class FileListComponent {
selectedIndex = -1; selectedIndex = -1;
onSelected(idx: number) { onSelected(idx: number) {

6
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-parent-child-2/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
@@ -11,7 +11,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
</div> </div>
`, `,
}) })
export class FileComponent {} class FileComponent {}
@Component({ @Component({
selector: "file-list", selector: "file-list",
@@ -23,6 +23,6 @@ export class FileComponent {}
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

8
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-props-11/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, Input } from "@angular/core"; import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
standalone: true, standalone: true,
template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`, template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
dateStr = this.formatDate(new Date()); dateStr = this.formatDate(new Date());
labelText = this.formatReadableDate(new Date()); labelText = this.formatReadableDate(new Date());
@@ -75,7 +75,7 @@ export class FileDateComponent implements OnInit {
</div> </div>
`, `,
}) })
export class FileComponent { class FileComponent {
@Input() fileName!: string; @Input() fileName!: string;
} }
@Component({ @Component({
@@ -90,6 +90,6 @@ export class FileComponent {
</ul> </ul>
`, `,
}) })
export class FileListComponent {} class FileListComponent {}
bootstrapApplication(FileListComponent); bootstrapApplication(FileListComponent);

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-rendering-1/src/main.ts
View File

@@ -1,5 +1,5 @@
// Required by Angular to work, feel free to ignore // Required by Angular to work, feel free to ignore
import "zone.js/dist/zone"; import "zone.js";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
@@ -12,6 +12,6 @@ import { bootstrapApplication } from "@angular/platform-browser";
</div> </div>
`, `,
}) })
export class FileComponent {} class FileComponent {}
bootstrapApplication(FileComponent); bootstrapApplication(FileComponent);

4
content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-side-effect-intro-7/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit } from "@angular/core";
standalone: true, standalone: true,
template: `<span>12/03/21</span>`, template: `<span>12/03/21</span>`,
}) })
export class FileDateComponent implements OnInit { class FileDateComponent implements OnInit {
dateStr = this.formatDate(); dateStr = this.formatDate();
ngOnInit() { ngOnInit() {

2
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-alarm-33/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, EventEmitter, Output } from "@angular/core"; import { Component, OnInit, EventEmitter, Output } from "@angular/core";

2
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-clock-32/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";

4
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-event-bubbling-30/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -14,7 +14,7 @@ import { Component } from "@angular/core";
</div> </div>
`, `,
}) })
export class WindowSizeComponent { class WindowSizeComponent {
height = window.innerHeight; height = window.innerHeight;
width = window.innerWidth; width = window.innerWidth;

4
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-window-size-28/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -13,7 +13,7 @@ import { Component } from "@angular/core";
</div> </div>
`, `,
}) })
export class WindowSizeComponent { class WindowSizeComponent {
height = window.innerHeight; height = window.innerHeight;
width = window.innerWidth; width = window.innerWidth;
} }

2
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-effects-challenge-44/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core"; import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core";

4
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-event-bubbling-31/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -15,7 +15,7 @@ import { Component } from "@angular/core";
</div> </div>
`, `,
}) })
export class EventBubblerComponent { class EventBubblerComponent {
logMessage() { logMessage() {
alert("Clicked!"); alert("Clicked!");
} }

2
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-hidden-memory-leak-events-35/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, Output, EventEmitter } from "@angular/core"; import { Component, OnInit, Output, EventEmitter } from "@angular/core";

2
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-hidden-memory-leak-functions-36/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit, Input } from "@angular/core"; import { Component, OnInit, Input } from "@angular/core";

2
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-in-component-side-effects-39/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";

6
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-initial-render-demo-26/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
standalone: true, standalone: true,
template: "<p>I am the child</p>", template: "<p>I am the child</p>",
}) })
export class ChildComponent {} class ChildComponent {}
@Component({ @Component({
selector: "parent-comp", selector: "parent-comp",
@@ -22,7 +22,7 @@ export class ChildComponent {}
</div> </div>
`, `,
}) })
export class ParentComponent { class ParentComponent {
showChild = true; showChild = true;
setShowChild() { setShowChild() {
this.showChild = !this.showChild; this.showChild = !this.showChild;

6
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-initial-render-on-init-27/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
standalone: true, standalone: true,
template: "<p>I am the child</p>", template: "<p>I am the child</p>",
}) })
export class ChildComponent implements OnInit { class ChildComponent implements OnInit {
ngOnInit() { ngOnInit() {
console.log("I am rendering"); console.log("I am rendering");
} }
@@ -26,7 +26,7 @@ export class ChildComponent implements OnInit {
</div> </div>
`, `,
}) })
export class ParentComponent { class ParentComponent {
showChild = true; showChild = true;
setShowChild() { setShowChild() {
this.showChild = !this.showChild; this.showChild = !this.showChild;

6
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-leaking-window-size-29/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
@@ -13,14 +13,14 @@ import { Component, OnInit } from "@angular/core";
</div> </div>
`, `,
}) })
export class WindowSizeComponent implements OnInit { class WindowSizeComponent implements OnInit {
height = window.innerHeight; height = window.innerHeight;
width = window.innerWidth; width = window.innerWidth;
resizeHandler = () => { resizeHandler = () => {
this.height = window.innerHeight; this.height = window.innerHeight;
this.width = window.innerWidth; this.width = window.innerWidth;
} };
ngOnInit() { ngOnInit() {
// This code will cause a memory leak, more on that soon // This code will cause a memory leak, more on that soon

6
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-mutable-update-title-43/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, NgZone, OnDestroy, inject } from "@angular/core"; import { Component, NgZone, OnDestroy, inject } from "@angular/core";
@@ -16,7 +16,7 @@ import { NgIf } from "@angular/common";
</div> </div>
`, `,
}) })
export class TitleChangerComponent implements OnDestroy { class TitleChangerComponent implements OnDestroy {
title = "Movies"; title = "Movies";
timeoutExpire: any = null; timeoutExpire: any = null;
@@ -54,7 +54,7 @@ export class TitleChangerComponent implements OnDestroy {
</div> </div>
`, `,
}) })
export class AppComponent { class AppComponent {
show = true; show = true;
toggle() { toggle() {

6
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-stateful-update-title-42/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnDestroy } from "@angular/core"; import { Component, OnDestroy } from "@angular/core";
@@ -16,7 +16,7 @@ import { NgIf } from "@angular/common";
</div> </div>
`, `,
}) })
export class TitleChangerComponent implements OnDestroy { class TitleChangerComponent implements OnDestroy {
title = "Movies"; title = "Movies";
timeoutExpire: any = null; timeoutExpire: any = null;
@@ -45,7 +45,7 @@ export class TitleChangerComponent implements OnDestroy {
</div> </div>
`, `,
}) })
export class AppComponent { class AppComponent {
show = true; show = true;
toggle() { toggle() {

4
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-unmounting-34/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component, OnDestroy } from "@angular/core"; import { Component, OnDestroy } from "@angular/core";
@@ -26,7 +26,7 @@ class CleanupComponent implements OnDestroy {
</div> </div>
`, `,
}) })
export class AppComponent { class AppComponent {
show = true; show = true;
toggle() { toggle() {

6
content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-update-title-41/src/main.ts
View File

@@ -1,4 +1,4 @@
import "zone.js/dist/zone"; import "zone.js";
import { bootstrapApplication } from "@angular/platform-browser"; import { bootstrapApplication } from "@angular/platform-browser";
import { Component } from "@angular/core"; import { Component } from "@angular/core";
@@ -16,7 +16,7 @@ import { NgIf } from "@angular/common";
</div> </div>
`, `,
}) })
export class TitleChangerComponent { class TitleChangerComponent {
title = "Movies"; title = "Movies";
updateTitle(val: string) { updateTitle(val: string) {
@@ -38,7 +38,7 @@ export class TitleChangerComponent {
</div> </div>
`, `,
}) })
export class AppComponent { class AppComponent {
show = true; show = true;
toggle() { toggle() {