Styling is not applied to buttons in components


If I add a component to the conference app:

import {Component} from 'angular2/core';

  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>
<button outline primary>test button</button>

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

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


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';


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


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)” >