feat: m-template should also project css classes

Author: kai-melchior

projects/mantic-ui/src/lib/components/template-outlet/template-outlet.component.html

@@ -1,2 +1,2 @@
 <ng-content />
-<ng-container *ngIf="template" [ngTemplateOutlet]="template" />
+<ng-container *ngIf="template" [ngTemplateOutlet]="template.ref" />

projects/mantic-ui/src/lib/components/template-outlet/template-outlet.component.ts

@@ -1,20 +1,24 @@
 import { CommonModule } from '@angular/common';
-import { Component, effect, inject, input, TemplateRef } from '@angular/core';
+import { Component, effect, inject, input } from '@angular/core';
 import { race, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { Destroyable } from '../../base/destroyable';
+import { Template } from '../../models/template';
 import { TemplateService } from '../../services/template.service';
 
 @Component({
     selector: 'm-template-outlet',
     imports: [CommonModule],
     templateUrl: './template-outlet.component.html',
-    styleUrl: './template-outlet.component.scss'
+    styleUrl: './template-outlet.component.scss',
+    host: {
+        '[class]': 'template?.class'
+    }
 })
 export class TemplateOutletComponent extends Destroyable {
     private readonly templateService = inject(TemplateService);
     private readonly nextNameSubject = new Subject<void>();
-    protected template: TemplateRef<unknown> | undefined;
+    protected template: Template | undefined;
     public readonly name = input.required<string | string[]>();
 
     public constructor() {

projects/mantic-ui/src/lib/components/template/template.component.ts

@@ -1,4 +1,5 @@
-import { Component, inject, input, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
+import { Component, effect, inject, input, OnDestroy, TemplateRef, viewChild } from '@angular/core';
+import { Template } from '../../models/template';
 import { TemplateService } from '../../services/template.service';
 
 @Component({
@@ -9,18 +10,22 @@ import { TemplateService } from '../../services/template.service';
 })
 export class TemplateComponent implements OnDestroy {
     private readonly templateService = inject(TemplateService);
+    private template: Template | undefined;
+    protected readonly contentTemplate = viewChild<TemplateRef<unknown>>('contentTemplate');
     public readonly name = input.required<string | string[]>();
-    private template: TemplateRef<unknown> | undefined;
+    public readonly class = input<string>();
 
-    @ViewChild('contentTemplate')
-    protected set contentTemplate(value: TemplateRef<unknown> | undefined) {
-        if (this.template) {
-            this.templateService.hide(this.name(), this.template);
-        }
-        this.template = value;
-        if (this.template) {
-            this.templateService.show(this.name(), this.template);
-        }
+    public constructor() {
+        effect(() => {
+            const ref = this.contentTemplate();
+            if (this.template) {
+                this.templateService.hide(this.name(), this.template);
+            }
+            this.template = ref ? { ref, class: this.class() } : undefined;
+            if (this.template) {
+                this.templateService.show(this.name(), this.template);
+            }
+        });
     }
 
     public ngOnDestroy(): void {

projects/mantic-ui/src/lib/models/template.ts

@@ -0,0 +1,6 @@
+import { TemplateRef } from '@angular/core';
+
+export interface Template<T = unknown> {
+    ref: TemplateRef<T>;
+    class?: string;
+}

projects/mantic-ui/src/lib/services/template.service.ts

@@ -1,16 +1,17 @@
-import { Injectable, TemplateRef } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { BehaviorSubject, distinctUntilChanged, Observable, ReplaySubject, Subject } from 'rxjs';
+import { Template } from '../models/template';
 
 @Injectable({
     providedIn: 'root'
 })
 export class TemplateService {
-    private readonly subscriptions = new Map<string, Subject<TemplateRef<unknown> | undefined>>();
-    private readonly templates = new Map<string, TemplateRef<unknown>[]>();
+    private readonly subscriptions = new Map<string, Subject<Template | undefined>>();
+    private readonly templates = new Map<string, Template[]>();
 
-    public show(names: string | string[], template: TemplateRef<unknown>): void {
+    public show(names: string | string[], template: Template): void {
         names = typeof names === 'string' ? [names] : names ?? [];
-        const subscriptionSubject = new BehaviorSubject<TemplateRef<unknown> | undefined>(template);
+        const subscriptionSubject = new BehaviorSubject<Template | undefined>(template);
         for (const name of names) {
             let list = this.templates.get(name);
             if (!list) {
@@ -26,7 +27,7 @@ export class TemplateService {
         }
     }
 
-    public hide(names: string | string[], template: TemplateRef<unknown>): void {
+    public hide(names: string | string[], template: Template): void {
         names = typeof names === 'string' ? [names] : names ?? [];
         for (const name of names) {
             const list = this.templates.get(name);
@@ -41,17 +42,17 @@ export class TemplateService {
         }
     }
 
-    public get(names: string | string[]): Observable<TemplateRef<unknown> | undefined> {
+    public get(names: string | string[]): Observable<Template | undefined> {
         names = typeof names === 'string' ? [names] : names ?? [];
         const existingSubject = names.map(name => this.subscriptions.get(name)).find(subscription => subscription);
-        const subject = existingSubject ?? new ReplaySubject<TemplateRef<unknown> | undefined>(1);
+        const subject = existingSubject ?? new ReplaySubject<Template | undefined>(1);
         for (const name of names) {
             this.subscriptions.set(name, subject);
         }
         return subject.pipe(distinctUntilChanged());
     }
 
-    private notify(name: string, template: TemplateRef<unknown> | undefined, fallbackSubscriptionSubject?: BehaviorSubject<TemplateRef<unknown> | undefined>): void {
+    private notify(name: string, template: Template | undefined, fallbackSubscriptionSubject?: BehaviorSubject<Template | undefined>): void {
         if (this.subscriptions.has(name)) {
             this.subscriptions.get(name)?.next(template);
         }

src/app/examples/template/template.component.ts

@@ -1,13 +1,12 @@
 import { NgIf } from '@angular/common';
 import { Component } from '@angular/core';
-import { ButtonComponent, SegmentComponent, TabComponent, TabGroupComponent, TemplateComponent, TemplateOutletComponent, TextareaComponent } from '@mantic-ui/angular';
+import { ButtonComponent, HideOnEmptyTemplateDirective, SegmentComponent, TabComponent, TabGroupComponent, TemplateComponent, TemplateOutletComponent } from '@mantic-ui/angular';
 import { ExampleCodeComponent, ExampleComponent } from '@mantic-ui/angular-doc';
-import { HideOnEmptyTemplateDirective } from '../../../../projects/mantic-ui/src/lib/directives/hide-on-empty-template.directive';
 import { HeaderComponent } from '../../components/header/header.component';
 
 @Component({
     selector: 'app-template',
-    imports: [ExampleCodeComponent, ExampleComponent, HeaderComponent, SegmentComponent, TabComponent, TabGroupComponent, TemplateComponent, TemplateOutletComponent, ButtonComponent, NgIf],
+    imports: [ExampleCodeComponent, ExampleComponent, HeaderComponent, SegmentComponent, TabComponent, TabGroupComponent, TemplateComponent, TemplateOutletComponent, ButtonComponent, NgIf, HideOnEmptyTemplateDirective],
     templateUrl: './template.component.html',
     styleUrl: './template.component.scss'
 })