import { Component, HostBinding, Input, OnInit, SimpleChanges, } from "@angular/core"; import { css } from "emotion"; import { BehaviorSubject } from "rxjs"; @Component({ selector: "sb-title", templateUrl: "./title.component.html", styleUrls: ["./title.component.scss"], }) export class TitleComponent implements OnInit { @HostBinding("class") className; @Input() title: string; @Input() theme: string; @Input() level: number; defaultInputs = new BehaviorSubject<any>({ level: 1, theme: "light", }); constructor() {} ngOnInit(): void { this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`; if (this.level == null) { this.level = 1; } } public ngOnChanges(changes: SimpleChanges): void { if (this.level == null) { this.level = 1; } const inputs = Object.keys(changes).reduce((result, item) => { result[item] = changes[item].currentValue; return result; }, {}); this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs }); this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`; } getDynamicStyle(inputs) { return css` h1, h2, h3, h4 { font-family: Open Sans, sans-serif; color: ${inputs.theme === "dark" ? "#FFFFFF" : "#000000"}; } `; } }