Menu
I have a table where every table-cell is a different instance of a component. Depending on the data (date, text, links) I'm using different components.
As these components have a lot in common I introduced a TableCellMasterComponent which is extended by all other type of table-cells.
All my components have the same host property:
@Component({
selector: 'td[app-text-col]',
templateUrl: './text-col.component.html',
styleUrls: ['./text-col.component.css'],
host: {
"[hidden]": "col.deactivated"
},
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}
Is it possible to somehow move this to the TableCellMasterComponent?
Also I would love to give all of them a contextmenu. But as I see it, it isn't possible to add HTML in the Master. Is that true?
Can I move the changeDetection to the Master?
681
In the parent component, declare the property that you want to receive in the child component, say 'ParentId'. While including the child component inside the parent component, bind the 'ParentId' property to the child component using property binding.
Metadata and Decorators are not inherited But there is an exception, @Input and @Output decorators are passed down to the child components. The two properties ( @Input() input , @Output() output ) in ComponentA will be visible to ComponentB .
Typescript and Angular give you a way to handle this encapsulation. Inherited components! Using class inheritance in TypeScript, you can declare a base component that contains common UI functionality and use it to extend any standard component you'd like.
Inheritance with Angular Components We can create a “parent” component with common properties/functions, followed by a child component that “extends” the parent. The child will inherit the parent's properties and functions but will have its own template, stylesheet and test file.
The Child can send data to Parent by raising an event, Parent can interact with the child via local variable or Parent can call @ViewChild on the child. We will look at all those options in this article. Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10, Angular 11, Angular 12
The content is likely still applicable for all Angular 2 + versions. Angular components are a fantastic way to break up our web apps into small easy to understand pieces of UI code. Sometimes in specific apps, we have drastic layout differences for the same data being displayed.
A simple way to implement this is to create a button, call a method in the code which then uses the Angular router to navigate to the page. And what if you didn’t want to repeat the same code in each component? Typescript and Angular give you a way to handle this encapsulation. Inherited components!
In this particular use case Component Inheritance is rather helpful when our templates have drastic differences in markup but display the same data. First, we need to define our base class that contains all of the logic we want to share. Our base employee component has one input and one output.
The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.
There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:
@HostBinding('hidden') get hidden(): boolean { return col.deactivated; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
