What is the deal with ionic-specific HTML tags? When and why do you use them?

ionic-v1
1

Neither in the documentation or in the many video courses someone directly gives attention to the ionic-specific HTML tags. How is <ionic-header-bar> any different than <header>? Is there a W3Schools like resource on the ionic HTML tags?

2

They are known as directives (in Ionic 1) and are an elegant way of implementing custom elements to a page. A directive is an AngularJS 1.* feature

https://docs.angularjs.org/guide/directive

It’s in your interest to get used to using them as much as possible because Ionic2 (which is currently in beta) will be making much more use of them in the form of components.

1 Like
3

So Angular provides a way for platforms like Ionic to register custom elements yeah? Is there a site that lists all the possible Ionic directives?

BTW Im kind of new to web development.

4

Yeah basically!

The Ionic Documents are pretty good so always have them open in a tab :slight_smile: http://ionicframework.com/docs/

2 Likes
5

And is it possible to use those directives directly as “raw html”?

Let explain (Ionic 2 app):

  • assuming that in a template there’s something like:
<div [innerHTML]="myhtml''></div> <ul> <li> <p>in my App component:<br> this.myhtml = someStringThatCameFromAnAPI;</p> </li> <li> <p>and someStringThatCameFromAnAPI is something like:<br> <ion-item>my item 1</ion-item><ion-item>my item 2</ion-item></p> </li> </ul> <p>how could I insert this “string” as html and the Ionic engine “understands” it’s an Ionic component and do “automagically” what is needed (changes this markup to the output markup that the browser will interprete)?</p>