new component inheriting existing html element angular

Question

I want to create custom button component with custom styling and functions. But I would like to inherit the properties, attributes of the button element like disabled.

So that I can directly use them from parent, instead of Input variable and assigning them for each one.

Is there anyway i can achieve that?

Thanks in advance!

Welcome to StackOverflow! Please make sure to add a minimal verifiable code snippet for others to take a look and understand your problem. For more details on how to create minimal reproducible example — nircraft
– nircraft, Commented May 3, 2019 at 16:07

Martin Parenteau · Accepted Answer · 2019-05-03 16:49:04Z

7

One way to augment a standard HTML element is to give the custom component an attribute selector. For example, the following component has the attribute selector button[custom-button]:

@Component({
  selector: 'button[custom-button]',
  template: '<ng-content></ng-content>',
  styleUrls: ['./custom-button.component.css']
})
export class CustomButtonComponent {
  ...
}

You can then set the attribute custom-button on an HTML button, which becomes the host element of the component:

<button custom-button disabled (click)="onClick()">I am disabled</button>

See this stackblitz for a demo.

edited May 3, 2019 at 16:49

answered May 3, 2019 at 16:29

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

new component inheriting existing html element angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related