Как создать собственную карту, используя угловые компоненты

Question

Я хочу создать собственную директиву, как в угловых 6. Как показано ниже

<my-card>
<my-card-header [text]="My card header"></my-card-header>
<my-card-body>
my card body.........
</my-card-body>
<my-card-footer> Yes this is footer<my-card-footer>
</my-card>