Include components in different parts of the page

Question

Suppose I have the following structure:

<table>
   <tbody>
   </tbody>
</table>

<form>
</form>

The pages that inherit this template will define which rows and columns will have my tables, which will be the form fields and which buttons.

I have different areas of my template that need to be filled in. How should I proceed?

Answer 1

I answered a similar question in the post /a/246370/94387

Complementing:

If you want to pass parameters to the component enter in the field-search.componente.ts:

import { Input, Component } from '@angular/core';

@Component({
   selector: 'my-campo-busca',
   templateUrl: './campo-busca.component.html',
   styleUrls: ['./campo-busca.component.css']
 }) 

export class CampoBuscaComponent { 
    @Input nome: string;

    constructor() {
    }
}

Use the input parameter in the component template (field-search.component.html):

<input type="text" [value]="nome">

To consume the component use the tag defined in the selector and provide the parameters as attributes.

Example providing string:

<my-campo-busca nome="nome string fixa" ></my-campo-busca>

Example providing a variable:

<my-campo-busca [nome] ="variavel" ></my-campo-busca>

If you want to define templates injected into your component. For Ex:

<my-painel-leitura>
   <ng-container titulo>
   ‎   <h1>Título</h1>
   ‎</ng-content>
   ‎<ng-container conteudo>
   ‎   Conteúdo! 
   ‎</ng-content>
</my-painel-leitura>

Read about transclusion: https://www.google.com/amp/scotch.io/amp/tutorials/angular-2-transclusion-using-ng-content