Angular Material: Create component that can be accessed by the 'parent element'?

Admin 1
Viewed 107

Note

The title of this post may not sound relavent with the content of this post, because I've no idea how to say it in a single sentence. Also, sorry if somebody else already asked this question, but I'm unable to find any.

The Situation

So here's my problem, I have a homepage component which has a Angular Material Grid List:

<mat-grid-list cols="3" gutterSize="5px" class="{{ isMobile ? 'mobile' : '' }}">
     <app-grid-section title="My Stuff">Some Content</app-grid-section>
     <app-grid-section title="Follower's Stuff">Some Content</app-grid-section>
     <app-grid-section title="Following's Stuff">Some Content</app-grid-section>
</mat-grid-list>

And I created a GridSection component, and the template looks like this:

<mat-grid-tile>
    <mat-grid-tile-header>{{ title }}</mat-grid-tile-header>

    <ng-content></ng-content>
</mat-grid-tile>

The Problem

When I view the page, it's pure blank. I run "Inspect" in chrome and I see the elements there, but their not showing on the page. Is it because mat-grid-tile must be a direct descendent of mat-grid-list? I hope not, because I was planning for the GridSection component to be like a "grid tile template".

I'm using the Angular CLI, Angular v10 or 8, and Visual Studio Code as the text editor.

Link on Stackblitz: https://stackblitz.com/edit/angular-ivy-q452c8?file=src/app/homepage/homepage.component.html

angular-material2 angular-material angular
1 Answers

I've found a workaround to make it work. Maybe this is related to some angular material issue.

I forked your stackblitz here: https://angular-ivy-nvdxmx.stackblitz.io

What I did:

grid-section.component.ts

<mat-grid-tile-header>{{ title }}</mat-grid-tile-header>
<ng-content></ng-content>

homepage.component.html

<mat-grid-list cols="3" gutterSize="5px">
<mat-grid-tile>
    <app-grid-section title="My Stuff">Some Content</app-grid-section>
</mat-grid-tile>
<mat-grid-tile>
    <app-grid-section title="Follower's Stuff">Some Content</app-grid-section>
</mat-grid-tile>
<mat-grid-tile>
    <app-grid-section title="Following's Stuff">Some Content</app-grid-section>
</mat-grid-tile>

app.module.ts

@NgModule({
  imports: [BrowserModule, FormsModule, MatButtonModule, MatGridListModule],
  entryComponents: [HomepageComponent],
  declarations: [AppComponent, HomepageComponent, GridSectionComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

This now is working. Please, let me know if you need something else!

user_42456540
Related