Skip to content

Instantly share code, notes, and snippets.

Avatar

Denis rexar1988

View GitHub Profile
@rexar1988
rexar1988 / ng-template-context.ts
Created Aug 1, 2020
ng-template with context
View ng-template-context.ts
<div class="template-content">
<ng-container [ngTemplateOutlet]="contact" [ngTemplateOutletContext]="context"></ng-container>
</div>
View ng-template.component.html
<ng-container [ngTemplateOutlet]="contact" [ngTemplateOutletContext]="context"></ng-container>
View ng-template.component.ts
import '...';
@Component({
selector: 'app-ng-template',
templateUrl: './ng-template.component.html',
styleUrls: ['./ng-template.component.scss']
})
export class NgTempalateComponent implements OnInit {
context = {
myFirstName: 'John Doe',
@rexar1988
rexar1988 / ng-template.ts
Last active Aug 1, 2020
Variable in ng-template
View ng-template.ts
<ng-template let-firstName="myFirstName" let-greeting="greeting">
<h2>Contact Template</h2>
<p>Hello, I am {{ firstName }}!</p>
<button (click)="greeting(firstName)">Show first name</button>
</ng-template>
View some-component.html
<ng-template #contact>
<h2>Contact Template</h2>
<p>Hello, I am contact template!</p>
</ng-template>
<div class="template-content">
<ng-container [ngTemplateOutlet]="contact"></ng-container>
</div>
<div class="template-content">
View ng-template.ts
<ng-template>
<h2>Hello! I am Template!</h2>
</ng-template>
@rexar1988
rexar1988 / node-type-list.page.ts
Created Jul 30, 2020
ViewContainerRef in NodeTypeListComponent
View node-type-list.page.ts
@Component({
selector: 'app-node-type-list',
templateUrl: './node-type-list.page.html',
styleUrls: ['./node-type-list.page.scss']
})
export class NodeTypeListPage implements OnInit {
constructor(private viewContainerRef: ViewContainerRef) { }
// Some code...
}
@rexar1988
rexar1988 / angular.component.ts
Last active Jul 30, 2020
ViewContainerRef example
View angular.component.ts
// Внедрение в компонент
// this.viewContainerRef это ссылка на HTML-шаблон компонента
constructor(private viewContainerRef: ViewContainerRef) { }
// Внедрение в директиву
// this.viewContainerRef это ссылка на HTML-элемент директивы,
// который можно получить с помощью свойства this.templateRef
constructor(private templateRef: TemplateRef<ElementRef>,
private viewContainerRef: ViewContainerRef) { }
@rexar1988
rexar1988 / index.js
Last active Jul 30, 2020
Create and append element in Vanilla JavaScript
View index.js
// Элемент который нужно вставить
const element = document.querySelector('.element');
// Элемент-контейнер после которого мы вставим контент
const parentElement = document.querySelector('.parent-element');
// Вставка
parentElement.after(element)
@rexar1988
rexar1988 / mockActivatedRoute.ts
Created Feb 10, 2020 — forked from benjamincharity/mockActivatedRoute.ts
Mock ActivatedRoute with params, data and snapshot.
View mockActivatedRoute.ts
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MdToolbarModule,
],
providers: [
{
provide: Router,
useClass: MockRouter,
},
You can’t perform that action at this time.