Angular 5: creating a parent component with an external template and overriding the inner part

Zerok Published at Dev

Zerok

I'm trying to create some sort of parent component that gives me some general appearance and logic for all my components, but in which I can write some specific logic and templating inside.

Look at these images:

Both of these components have common traits: an upper part with a title and a "hide/show" button, and then, a "body" that differs between both of them. They also share that edit button and so, but my idea is to make that "body" part completely dynamic: that's the part of the component that I want to override with my implementation components.

In other words: I want to make an abstract class with Typescript that holds the template: the rectangle, the header and body, the title (which I want to override from the subclass)... and then, the "body" will be filled with the template provided by the subclass.

How can this be achieved in Angular? This far I've only seen ways of overriding completely the parent components templates, not to complement one with the other. I guess there must be a way to insert HTML code with Angular directives inside a component...

Thing is, which is it?

Thank you!

Mehdi Benmoha

Let's assume you named your component CardComponent and your selector is app-card.

For the title

You can simply use the @Input() component decorator to get the title string and use it in your generic CardComponent, see the angular documentation: https://angular.io/guide/component-interaction

For the body:

You can create your component containing the header and Edit button and then use the <ng-content> tag to get what's inside the component selector, for example:

<h2>{{title}}</h2>
<ng-content></ng-content>
<button>Edit</button>

And so you can use your card component like this:

<app-card [title]="Channel select">
    <!-- Insert your body html -->
</app-card>

PS: to learn more about ng-content, see this: https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-10-28

Comments

0 comments

From Dev

Related Related

Article

Angular 5: creating a parent component with an external template and overriding the inner part

Angular 5: creating a parent component with an external template and overriding the inner part

Track scrolling of inner part of external component in Angular

Overriding HTML template of library component in angular 7

Modify the template part of an angular component

Angular Access inner component of ng-template

Overriding the encapsulated CSS of external component

Angular 5: how to refer to a subcomponent method from a parent component HTML template?

Let know Child Component that it is part of FormGroup of Parent Component Angular

Angular 5 component is not part of any NgModule

How to switch component in angular 5 like template?

Angular 5 Update Parent Component value from child Component

Pass Event from child component to parent component Angular 5

Overriding the encapsulated :host-style of external component

Creating a template inner lambda function?

Styling child components template from parent component css angular

Angular - Can a child component reference a parent's template variable?

Using parent component's template in Angular2

How to wrap an Angular Component and pass ng-template from outer to inner component

How to get inner html of Angular6 component and add it to component template?

How to add external CSS files - styleUrls - Angular 5 component

Call a function of external js file in angular 5 component

Vue Component with external template and style?

Angular 5 EventEmitter from child to parent component emits undefined

Angular 5 - Remove a child component from parent view on user delete

How to inherit css styles in child component from parent in Angular 5

Update parent boolean from child component in Angular 5

Get Parent ViewContainerRef from inside projected child component Angular 5

Angular 5: Passing an array from child to parent component

angular5 - child component called before parent ngOnInit finish

Angular 5 getting array issue with data from service to component to template