Commit 4beb8f2e authored by Philipp Rummelsberger's avatar Philipp Rummelsberger

for Root

parent b3aafb78
<div style="text-align:center">
<div style="text-align:center" [backgroundImage]="'noice.gif'">
<h1>Welcome to foo!</h1>
<img
width="450"
......
......@@ -3,10 +3,17 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { BackgroundImageModule } from './background-image/background-image.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
imports: [
BrowserModule,
HttpClientModule,
BackgroundImageModule.forRoot({
host: 'assets/images/',
})
],
providers: [],
bootstrap: [AppComponent]
})
......
import { BackgroundImageDirective } from './background-image.directive';
describe('BackgroundImageDirective', () => {
it('should create an instance', () => {
const directive = new BackgroundImageDirective();
expect(directive).toBeTruthy();
});
});
import { Directive, ElementRef, Inject, Input } from '@angular/core';
import { BackgroundImageService } from './background-image.service';
import { OPTIONS_TOKEN } from './bg-image-token';
@Directive({
selector: '[backgroundImage]'
})
export class BackgroundImageDirective {
@Input() public set backgroundImage(src: string) {
this.el.nativeElement.style.backgroundImage = `url(${this.options.host}/${src})`;
}
constructor(
protected readonly el: ElementRef,
protected readonly service: BackgroundImageService,
@Inject(OPTIONS_TOKEN) protected readonly options: { host: string }
) { }
}
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BackgroundImageDirective } from './background-image.directive';
import { OPTIONS_TOKEN } from './bg-image-token';
import { BackgroundImageService } from './background-image.service';
@NgModule({
declarations: [
BackgroundImageDirective,
],
imports: [
CommonModule
],
exports: [
BackgroundImageDirective,
],
})
export class BackgroundImageModule {
public static forRoot(options: { host: string }): ModuleWithProviders {
return {
ngModule: BackgroundImageModule,
providers: [
{
provide: OPTIONS_TOKEN,
useValue: options,
},
BackgroundImageService,
]
}
}
}
import { TestBed } from '@angular/core/testing';
import { BackgroundImageService } from './background-image.service';
describe('BackgroundImageService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: BackgroundImageService = TestBed.get(BackgroundImageService);
expect(service).toBeTruthy();
});
});
import { Inject, Injectable } from '@angular/core';
import { OPTIONS_TOKEN } from './bg-image-token';
@Injectable({
providedIn: 'root'
})
export class BackgroundImageService {
protected readonly _options: { host: string };
constructor(@Inject(OPTIONS_TOKEN) options: { host: string }) {
this._options = options;
}
public get options(): { host: string } {
return this._options;
}
}
import { InjectionToken } from '@angular/core';
export const OPTIONS_TOKEN = new InjectionToken<{}>('options token.');
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