Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 5f16004

Browse filesBrowse files
committed
refactor(template-id): signal inputs, cleanup, tests
1 parent 8138514 commit 5f16004
Copy full SHA for 5f16004

File tree

2 files changed

+48
-7
lines changed
Filter options

2 files changed

+48
-7
lines changed
+41-4Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,54 @@
1-
import { TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
22
import { TemplateIdDirective } from './template-id.directive';
3-
import { TemplateRef } from '@angular/core';
3+
import { Component, computed, DebugElement, TemplateRef, viewChild } from '@angular/core';
4+
import { By } from '@angular/platform-browser';
5+
import { NgTemplateOutlet } from '@angular/common';
6+
7+
@Component({
8+
imports: [TemplateIdDirective, NgTemplateOutlet],
9+
template: `
10+
<ng-template cTemplateId="test">Inner Text</ng-template>
11+
<div class="test">
12+
<ng-container *ngTemplateOutlet="id()" />
13+
</div>
14+
`
15+
})
16+
class TestComponent {
17+
readonly templateId = viewChild(TemplateIdDirective);
18+
19+
readonly id = computed(() => this.templateId()?.templateRef);
20+
}
421

522
describe('TemplateIdDirective', () => {
23+
let fixture: ComponentFixture<TestComponent>;
24+
let component: TestComponent;
25+
let debugElement: DebugElement;
26+
627
beforeEach(() => {
728
TestBed.configureTestingModule({
8-
providers: [TemplateRef],
9-
});
29+
imports: [TestComponent],
30+
providers: [TemplateRef]
31+
}).compileComponents();
32+
33+
fixture = TestBed.createComponent(TestComponent);
34+
debugElement = fixture.debugElement.query(By.css('.test'));
35+
component = fixture.componentInstance;
36+
37+
fixture.detectChanges();
1038
});
1139
it('should create an instance', () => {
1240
TestBed.runInInjectionContext(() => {
1341
const directive = new TemplateIdDirective();
1442
expect(directive).toBeTruthy();
1543
});
1644
});
45+
46+
it('should create a template with innerText', () => {
47+
expect(debugElement.nativeElement.innerText).toBe('Inner Text');
48+
});
49+
50+
it('should get the template id', () => {
51+
expect(component.templateId()?.id).toBe('test');
52+
expect(component.templateId()?.templateRef).toEqual(jasmine.any(TemplateRef));
53+
});
1754
});
+7-3Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { Directive, inject, Input, TemplateRef } from '@angular/core';
1+
import { Directive, inject, input, TemplateRef } from '@angular/core';
22

33
@Directive({
44
selector: '[cTemplateId]'
55
})
66
export class TemplateIdDirective {
7-
public readonly templateRef = inject(TemplateRef);
8-
@Input('cTemplateId') id!: string;
7+
readonly templateRef = inject(TemplateRef);
8+
readonly cTemplateId = input.required<string>();
9+
10+
get id() {
11+
return this.cTemplateId();
12+
}
913
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.