Home Angular component input triggers button styling on wrong element
Reply: 0

Angular component input triggers button styling on wrong element

user1401
1#
user1401 Published in June 20, 2018, 10:44 pm

Everything I pass to an Angular (v5.2.9) component will be written into the DOM as far as I can tell. Here's the output of one of my button components:

<app-button color="orange" icon="symbol-chevron" type="button" ng-reflect-type="button" ng-reflect-color="orange" ng-reflect-icon="symbol-chevron"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><button class="button button--orange">
    <!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
    <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    Weiter
    <!--bindings={
  "ng-reflect-ng-if": "true"
}--><svg class="button__icon symbol"><use xlink:href="/assets/images/symbols.svg#symbol-chevron"></use></svg>

</button>

<!--bindings={
  "ng-reflect-ng-if": "false"
}-->

<!----></app-button>

I'm accepting an input called type because my button component can either be a button or link. I'm handling this scenario in the template. The problem is that the browser now thinks that <app-button> is a button, because Angular applies type="button" to it. This means that browsers are styling <app-button> like a button.

Should I avoid names that are also HTML attributes? Why is Angular writing everything into the HTML?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.304268 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO