Angular 6 nested template view

Question

I am new to Angular (I am using Angular 6) and I would like to define some "insert content blocks" in my layout views.

For example:

<!-- layout.component.html -->
<div>{{my.title.component}}</div>
<div>{{my.body.component}}</div>

Then, I would like to be able to do something like:

<!-- title.component.html -->
<h1>I am the title</h1>

And for body:

<!-- body.component.html -->
<p> I am a very complex component inserted up there </p>

I would like to then create something like:

<!-- assembled.component.ts -->
@MagicalDecorator({
   layout: LayoutComponent,
   use_as_title_component: TitleComponent,
   use_as_body_component: BodyComponent,
}

Can I do such thing? I may be using the wrong approach, but this is how I would imagine it would work. If there is a better approach, I would also like to know.

Edit: the idea is that I want to be able to add formatting using the layout component (e.g., put them in a bootstrap panel) and not have to repeat the same formatting for each combination of components that I want to use with the same layout

Answer 1

Have you looked at routing?

Routing allows you to define a standard layout container and then just replace what is inside of that container.

For example, you you could define a "app" container (defined with a router outlet) that defines the entire page.

You could define a "shell" container and replace which component is displayed inside of it by simply changing the route.

Here is a picture of what I mean:

Here is another screen shot. This one has three child router outlets. The innermost router outlet is used to display the contents for the particular selected tab.

Answer 2

In the 'angular' way you simply create a parent component with 2 child component:

Child components:

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

@Component({
  selector    : 'title-component',
  template : '<h1>I am the title</h1>',
  styleUrls   : ['./title.component.scss']
})
export class TitleComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

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

@Component({
  selector    : 'body-component',
  template : '<p> I am a very complex component inserted up there - with an external field of {{}}</p>',
  styleUrls   : ['./body.component.scss']
})
export class BodyComponent implements OnInit {
@Input()
someField;

  constructor() { }
  ngOnInit() {}
}

Parent component:

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

@Component({
  selector    : 'assembled-component',
  template : ׳<section>
     <title-component></title-component>
     <body-component></body-component>
</section>
׳,
  styleUrls   : ['./assembled.component.scss']
})
export class AssembledComponent implements OnInit {
  fieldNameOfParentComponent = "Some Formatting";
  constructor() { }
  ngOnInit() {}
}

(*)You can use the selectors in any template you want in the application as long as you export these component in the module (lets call it innerModule) and import that module in the module that the component you want to add these selectors to (lets call it externalComponent) is registered on (lets call it.. externalModule).

(**) If you want to use the same component a few time in the same template - use the *ngFor directive. You can also pass input fields into it. For example:

<section>
      <title-component></title-component>
      <body-component *ngFor="let item in bodyData" 
              [fieldFromOutside]="fieldNameOfParentComponent">
           {{ item.someField }}
      </body-component>
<section>