View html-directive-06.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (element.tagName === 'A') { | |
const href: string = element.href?.toLowerCase(); | |
if (href?.startsWith(location.origin.toLowerCase())) { | |
element.addEventListener('click', (e: MouseEvent) => { | |
this._router.navigate([href.substring(location.origin.length)]); | |
e.preventDefault(); | |
}); | |
} | |
} |
View html-directive-05.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const descandants = this._elementRef.nativeElement.querySelectorAll('*'); | |
for (const element of descandants) { | |
element.setAttribute(this._uniqueId, ''); | |
... | |
} |
View html-directive-04.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this._elementRef.nativeElement.innerHTML = this.html; |
View html-directive-03.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this._uniqueId ||= [...this._elementRef.nativeElement.attributes].find( | |
(attr) => attr.name.startsWith('_ngcontent-') | |
).name; |
View html-directive-02.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; | |
import { Router } from '@angular/router'; | |
@Directive({ | |
selector: '[html]', | |
}) | |
export class HtmlDirective implements OnChanges { | |
private _uniqueId: string; | |
@Input() |
View html-directive-01.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'app-main', | |
template: `<div [innerHTML]="content"></div>`, | |
styles: ['.bold { font-weight: bold; }'], | |
}) | |
export class MainComponent { | |
public content: string = `<p class="bold">I'm the main component</p> | |
<p><a href="/hello">Hello</a></p> | |
<p><a href="https://angular-rxe6rp.stackblitz.io/bye">Bye</a></p> | |
<p><a href="https://www.medium.com">Medium</a></p>`; |
View decorator-08.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div *ngFor="let entry of entries"> | |
<generic-history-entry [entry]="entry"></generic-history-entry> | |
</div> |
View decorator-07.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
AfterViewInit, | |
Component, | |
ComponentFactoryResolver, | |
Input, | |
ViewChild, | |
ViewContainerRef, | |
} from '@angular/core'; | |
import { BaseHistoryEntryComponent } from './base-history-entry.component'; | |
import { GetHistoryEntryComponent } from './history-entry-type.decorator'; |
View decorator-06.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { BaseHistoryEntryComponent } from './base-history-entry.component'; | |
import { HistoryEntryComponent } from './history-entry-type.decorator'; | |
@Component({ | |
selector: 'workflow-ended-history-entry', | |
template: `<div>The workflow took {{ data | number }}ms to complete</div>`, | |
}) | |
@HistoryEntryComponent(3) | |
export class WorkflowEndedHistoryEntryComponent extends BaseHistoryEntryComponent<number> {} |
View decorator-05.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let _bag = new Map<number, any>(); | |
export function HistoryEntryComponent(type: any) { | |
return function (cls: any) { | |
_bag.set(type, cls); | |
}; | |
} | |
export function GetHistoryEntryComponent(type: number) { | |
return _bag.get(type); |
NewerOlder