Use a component in another component in ionic2

Question

I have a component

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

@Component({
  selector: 'footer-component',
  templateUrl: 'footer.html'
})
export class FooterComponent {}

And would like to use that one in another like that

<ion-content>
  Hello
  <footer-component><footer-component/>
</ion-content>

I added both in my "@NgModule". Unfortunately I get this error :

directive_normalizer.js:92Uncaught Error: Template parse errors: Only void and foreign elements can be self closed "footer-component"

Do you know why ?

Answer 1

You set <footer-component><footer-component/>

Where <footer-component/> is recognized as a self closing tag (the />) (like <input/>

To close a tag the / should be at the beginning of the closing element. (like you see in </ion-content>

So change your <footer-component/> to </footer-component>

Full code:

<ion-content>
  Hello
  <footer-component></footer-component>
</ion-content>