4

I'd like to extend ion-button component to add some methods on a custom component of my own. So I did:

import {Component, ElementRef, Renderer} from '@angular/core';
import {Button, Config} from "ionic-angular";

@Component({
  selector: '[search-button]',
  templateUrl: 'search-button.component.html',
})
export class SearchButtonComponent extends Button {
  constructor(ionButton: string, config: Config, elementRef: ElementRef, renderer: Renderer) {
    super(ionButton, config, elementRef, renderer);
  }
}

But this is giving me a ERROR Error: Uncaught (in promise): Error: No provider for String! error.

What's the good way of extending ionic components?

Hugo H
  • 6,029
  • 5
  • 37
  • 57
  • I take it you've defined SearchButtonComponent correctly in app-module.ts? importing it and defining it in the declarations array. Or in providers section of parent component (if nested and singleton wont' fly) If you have I'd be looking at the source for the original component. github.com/ionic-team/ionic/blob/master/src/components/butto‌​n/… In the @Component metadata of the original it also had change detection and view encapsulation as well. You probably need to replicate that too.. – JGFMK Jul 13 '17 at 12:05
  • There is also a discussion here https://forum.ionicframework.com/t/best-way-to-extend-an-ionic2-component/57718/2 Not sure if @Input annotations of base class are inherited by default... https://stackoverflow.com/questions/34465214/access-meta-annotation-inside-class-typescript – JGFMK Jul 13 '17 at 12:14
  • 1
    Here's an example: [Extending ion-button](https://forum.ionicframework.com/t/extending-ion-button/97418/2) – erikvimz Dec 04 '17 at 08:36

0 Answers0