CODEWITHSUNDEEP
propertiesionic3
Manos
Manos

Reputation: 51

Custom component with property

I want to know how it is possible in Ionic 3 to create our own component with some property. An example is the "full" property of an ion-button. What I want to do is to render my own component which will look like this

<my-component my-property></my-component>

Upvotes: 0

Views: 19

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

I would highly recommend any basic tutorial for you from angular.io website.

What you want is a very basis of Angular which Ionic is leveraging.

See here I build a simple example for you: https://stackblitz.com/edit/ionic-f9bq9h

You define your component in a ts file:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<div>{{ myProperty }}</div>`
})
export class MyComponent {

  @Input('myProperty') myProperty: string;

  constructor() {

  }

}

Make sure it is duly added to app.module.ts

Then you can use it in other components where you import it:

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <my-component [myProperty]="'I am a custom component'"></my-component>
</ion-content>

Upvotes: 1

Related Questions