Skip to content

Instantly share code, notes, and snippets.

Avatar

Sébastien Sougnez ssougnez

View GitHub Profile
View html-directive-06.ts
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
const descandants = this._elementRef.nativeElement.querySelectorAll('*');
for (const element of descandants) {
element.setAttribute(this._uniqueId, '');
...
}
View html-directive-04.ts
this._elementRef.nativeElement.innerHTML = this.html;
View html-directive-03.ts
this._uniqueId ||= [...this._elementRef.nativeElement.attributes].find(
(attr) => attr.name.startsWith('_ngcontent-')
).name;
View html-directive-02.ts
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
@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
<div *ngFor="let entry of entries">
<generic-history-entry [entry]="entry"></generic-history-entry>
</div>
View decorator-07.ts
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
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
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);