Styling is not applied to buttons in components

Ionic Framework ionic-v3
1

If I add a component to the conference app:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-button',
  template: '<button outline primary>test button</button>'
})
export class MyButton {}

… it looks grey and doesn’t have any of the normal styling.
If I include the same HTML in the page template the styling is applied:

<h4>Ionic Conference</h4>
<my-button></my-button>
<button outline primary>test button</button>

image

How can I get styling on the button within the component?

(Using: “ionic-framework”: “2.0.0-alpha.42”)

1 Like
3

see this: How to make a directive or equivalent?

“@Page comes with the IONIC_DIRECTIVES by default, if you’re using the @Component you need to include them in the directives array”

I had to use this:

import {IONIC_DIRECTIVES} from 'ionic-framework/ionic';

4

What is the new approach to this? directives is no more in components annotations available. The buttons remain the same grey style.

5

If you are using RC0 then this is how you need to use new syntax as show below (you need to add ion-button)
<button ion-button outline small color=“dark” (click)=“AddEditOilModal(oilComponent)” >