How to namespace/target a component input variable

Question

Given the following

mat-button directive responds to a disabled attribute / input
matTooltip directive responds to a disabled attribute / input

Is it possible to create a material button element that is disabled, but has a non-disabled tooltip associated with it? i.e. is it possible to namespace / target a component input so that it only applies to the mat-button directive and not the matTooltip directive?

In the following example, both the button AND tooltip are disabled:

<button mat-button matTooltip="first enter email address" [disabled]=true>
  Next
</button>

I can't seem to disable just the button and not the tooltip. It's possible that this is a bug in the current matTooltip implementation.

Thanks!!

Using angular 4.4.6 and material 2-beta.12

Günter Zöchbauer · Accepted Answer · 2017-10-22 12:05:18Z

1

There is no way to resolve input name conflicts except renaming the inputs.

You can use a helper element and split the component and directive so that they don't share the same host element:

<span matTooltip="first enter email address">
  <button mat-button  [disabled]=true>
    Next
  </button>
</span>

answered Oct 22, 2017 at 12:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

John Over a year ago

Apparently I need to wait 10 minutes to accept your answer

Collectives™ on Stack Overflow

How to namespace/target a component input variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related