CODEWITHSUNDEEP
angularionic-frameworkionic2componentsionic3
Sampath
Sampath

Reputation: 65870

Ionic native component vs Angular custom component

I have created angular progress bar component using this article.It's working fine.Can you tell me what is the difference between angular custom component and native ionic component like ion-range?

Custom angular component:

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

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {

  @Input('progress') progress;

  constructor() {

  }

}

Upvotes: 1

Views: 360

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29624

The difference is nothing really. Ionic is built on top of angular. All the specific ionic components are built using angular component decorator. A component like ion-range is in fact an Angular component that is within the ionic-angular module.

If you check the source linked, it reads as:

@Component({
  selector: 'ion-range',
  template: '<!-- custom html here -->'

  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
  encapsulation: ViewEncapsulation.None,
})
export class Range extends BaseInput<any> implements AfterContentInit, ControlValueAccessor, OnDestroy {
//..
}

The input properties of each of the ionic component is defined using angular's @input() and all of the output events like ionChange are defined using Angular's EventEmitter.

Upvotes: 2

Related Questions