Best way to extend an ionic2 component?

Ionic Framework ionic-v3
1

I’d like to extend an ionic2 component to add my own customisations and content.

Or, make a re-usable template that itself doesn’t add anything to the DOM. eg. So I can make my own custom button and re-use it over and over again.

I haven’t found the best way to achieve this. Has anyone got any pointers?

Problems I am facing:

I found if I make a wrapper component, it adds extra DOM, which means some layout and functionality doesn’t work correctly. Can I make a component that isn’t itself added to the DOM, but it’s contents are?

If I extend an ionic2 component I have to re-create the template, and I’m worried it’s going to be a nightmare to maintain. I haven’t actually tried it. But I wanted the best tips on how to handle this. I also wanted to add some attribute directives to the template and other things, so it seems a bit more complex than wrapping.

At the moment I have some text fields, and other components I like to have certain attributes on and set up a certain way (formatting, parsing, look, etc) and It would make infinite sense to me to just create a re-usable component. But the above 2 problems are stopping me, so I’m just duplicating a whole pile of attribute directives and code every time.

It seems to be quite a common problem, not sure why I haven’t found a simple solution yet??

Can post examples if need :slight_smile:

Thanks, Ryan

1 Like
2

The tricky bit seems to be template inheritance and extension, it can be as “clean” as the following pseudocoded.

@Component({
  template: (() => {
    // 1. Acquire parent component's template markup with 
    //    Reflect.getMetadata('annotations', IonicComponent);
    // 2. Process acquired template with DOM manupilation and return it as the child's template.
  }())
})
export MyCustomComponent extends IonicComponent {
  // extend properties and behavior
}

See http://stackoverflow.com/questions/34465214/access-meta-annotation-inside-class-typescript

The maintenance overhead is still there since DOM modification’s target and end result are both a “messy state”, so it’s not perfect. In practice though, it might be a good-enough solution.

3

Thanks I’ll give that a go!! :smile:

The other way I thought is to make a single attribute directive to add to my component. But I can’t figure out how to get it to do certain things :confused:

4

I found this blog series. But wasn’t overly useful as it was specific to their component. But the idea of a template “merge” was a good one I thought. Wonder if ionic could do something like that.

I’m expecting a standard way to do this in angular2 / ionic2 will emerge as it hits release. Well Hopefully :wink:

5

And just incase someone else comes across this. I’ve just decided to copy/paste code for now.

There are already enough changes happening in angular2/ionic2 to keep up with.

It seems copy/paste is the way to do it at the moment :slight_smile:

6

Personally I think this is a fool’s errand. You are going to become overly dependent on the particular implementation details of Ionic components, which will change out from under you. Inheritance is a poor fit here.

7

Yeah, the more I have looked at it, the more I have decided it’s not a good idea for this case, and I didn’t end up going down this path.

Figured out a way to make a wrapper for a new component. Aggregation rather than inheritance, that didn’t mess up the styling / layout. Although it is still feels messy and needs lots of “pass-through” code.

Hoping there emerges a better way!

8

Really wish the angular replace:true functionality was around. Would make some of this so easy :frowning: . I’ve already got ugly looking DOM, which I’m expecting to break with any ionic changes. And it is useless DOM too. It’s just a wrapper around another component so I can have a re-usable portion of template.