Angular projection with directive

I am creating templates using projection in angular 18. I have a base component html named base-list.component.html

...
<mat-drawer-content class="bg-white">
<div class="d-flex flex-column h-100" [loading]="isLoading">
<ng-content select="[table]"></ng-content>
</div>
</mat-drawer-content>
...


and a base class BaseListComponent

@Component({
selector: 'app-base-list',
templateUrl: './base-list.component.html',
standalone: true,
imports: [
LoadingDirective
]
})
export class BaseListComponent<TType> {

protected isLoading: boolean = false
...


In the child component I have a html list.component.html

<app-base-list>
<ng-container table>
<table mat-table matSort [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
Name
</th>
<td mat-cell *matCellDef="let element" class="text-start">{{element.name}}</td>
</ng-container>
</table>
</ng-container>
</app-base-list>


and a class

@Component({
selector: 'app-lista',
standalone: true,
imports: [
],
templateUrl: './lista.component.html',
styleUrls: ['./lista.component.scss']
})
export class ListaComponent extends BaseListComponent<IData> implements AfterViewInit {
ngAfterViewInit() {
this.seacrh()
}

private seacrh = () => {
this.loading = true
...
this.http.get<IData[]>()
.subscribe(resp => {
if (resp.error) {
...
}
else {
...
}
});
}

}


If I put the directive on the child page without modifying the code the loading appears but with the directive in the parent component the value of the isLoading flag does not change and the loading does not appear.

My template has several other methods and properties, this is just an example using variables

Is it possible to make this type of template where the child component can modify the values created in the template without using Emit ?

Continue reading...