Do you want to know how to make your own modules like angular material? Lets get stared

We will create a app called TestApp which will consume our module Card. Card module will contains the CardComponent.

Create an app called TestApp using angular cli

ng new TestApp

This will create a new folder TestApp.

Now we will create the module Card.

This card module will have predefined styles for card like box-shadown, border, width etc. It will also have the provision to accept the title, body and footer of the card.

So create the module using angular cli

ng g module Card

This will create a card folder inside TestApp/angular/src/app/

Now go inside this folder, and create a component called card

Inside TestApp/angular/src/app/card folder, run the following command

ng g component card

Now we have a folder called card which contains the CardComponent.

See the following code example for more understand and run it online.

We have to export this card component so that can be used inside our app component.

So in the CardModule, export the component.

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [CardComponent],
    exports:[CardComponent]
})

In the app.module.ts file, import the card module

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        CardModule // import card module here
    ],
    providers: [],
    bootstrap: [AppComponent]
})

In the app.component.html, use this component

Now we have the content inside the card.component.html being dislayed inside the app.component.html.

Taking parameters as attribute

You can also take the input parameter as attribute for the card component.

card.component.html

export class CardComponent implements OnInit {

    @Input('title') title;

    constructor() { }

    ngOnInit() {
    }

}

app.component.html

<app-card title="Card title"></app-card>

More flexibility

Ok the above steps were fine, but we want more flexibility in terms of which content should go in which slot or place.

For this, angular provides us with <ng-content>. Using <ng-content>, you can dynamically insert the contents inside the component. In order to create module like angular material, you need to know little more about properties available in module.

card.component.html

<h1></h1>
<p><ng-content select="[body]">Body content</ng-content></p>
<div>
<ng-content select="[footer]">Footer content</ng-content>
</div>

app.component.html

<app-card title="Card title">
<ng-container body>Some dynamic random text</ng-container> <!-- body -->
<span footer>Footer</span> <!-- footer -->
</app-card>