Commit a6064a59 authored by Philipp Rummelsberger's avatar Philipp Rummelsberger

projection

parent 4beb8f2e
<div style="text-align:center" [backgroundImage]="'noice.gif'">
<div style="text-align:center; height: 400px;" [backgroundImage]="'noice.gif'">
<h1>Welcome to foo!</h1>
<img
width="450"
src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
/>
</div>
<foo-list>
<ng-template>
<h1>
HEADING DOOOOO
</h1>
</ng-template>
<!-- <h1 *listItemHeader>HEADING FOOOOO </h1> -->
<foo-list-item *ngFor="let element of arrayOfElements">
{{ element.name }}
</foo-list-item>
</foo-list>
<div>Message: {{ hello$ | async | json }}</div>
......@@ -8,6 +8,20 @@ import { HttpClient } from '@angular/common/http';
})
export class AppComponent {
hello$ = this.http.get<string>('/api/hello');
arrayOfElements: Array<{name: string}> = [
{
name: 'Albert',
},
{
name: 'Patrick',
},
{
name: 'Alex',
},
{
name: 'Samuel',
},
];
constructor(private http: HttpClient) {}
}
......@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { BackgroundImageModule } from './background-image/background-image.module';
import { ListModule } from './list/list.module';
@NgModule({
declarations: [AppComponent],
......@@ -12,7 +13,8 @@ import { BackgroundImageModule } from './background-image/background-image.modul
HttpClientModule,
BackgroundImageModule.forRoot({
host: 'assets/images/',
})
}),
ListModule,
],
providers: [],
bootstrap: [AppComponent]
......
import { ListItemDirective } from './list-item.directive';
describe('ListItemDirective', () => {
it('should create an instance', () => {
const directive = new ListItemDirective();
expect(directive).toBeTruthy();
});
});
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[listItemHeader]'
})
export class ListItemDirective {
constructor(
public templateRef: TemplateRef<ListItemDirective>
) { }
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ListItemComponent } from './list-item.component';
describe('ListItemComponent', () => {
let component: ListItemComponent;
let fixture: ComponentFixture<ListItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ListItemComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'foo-list-item',
templateUrl: './list-item.component.html',
styleUrls: ['./list-item.component.scss']
})
export class ListItemComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListComponent } from './list/list.component';
import { ListItemComponent } from './list-item/list-item.component';
import { ListItemDirective } from './list-item.directive';
@NgModule({
declarations: [
ListComponent,
ListItemComponent,
ListItemDirective,
],
imports: [
CommonModule
],
exports: [
ListComponent,
ListItemComponent,
ListItemDirective,
],
})
export class ListModule { }
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ul>
<ng-content></ng-content>
</ul>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ListComponent } from './list.component';
describe('ListComponent', () => {
let component: ListComponent;
let fixture: ComponentFixture<ListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { AfterContentInit, Component, ContentChild, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ListItemDirective } from '../list-item.directive';
@Component({
selector: 'foo-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements AfterContentInit {
public headerTemplate;
// @ContentChild(ListItemDirective, { static: false }) public header;
@ContentChild(TemplateRef, { static: false }) public header;
public ngAfterContentInit() {
console.log(this.header)
if (!this.header) { return }
this.headerTemplate = this.header;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment