CODEWITHSUNDEEP
componentsangular6
james bond
james bond

Reputation: 11

Angular 6 component as Attribute in app component

I am using a component as an attribute in app component but when I place that component in my tag the content of tag is empty.

My Component which is being used as attribute:

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

@Component({
  selector: '[app-ellipsis-component]',
  templateUrl: './ellipsis-component.component.html',
  styleUrls: ['./ellipsis-component.component.css']
 })
 export class EllipsisComponentComponent implements OnInit {

constructor() { }

ngOnInit() {
 }
 }

My app component html

<div class="tile-block" style="width:300px">
<h3 app-ellipsis-component>  
  this is a just name cdsdsc dsdbskcds jsdbkcs cdslnsl;nks cdsn
</h3>
</div>

But when I run this code nothing is displayed inside h3 tag. Can anyone help me in solving my issue?

Upvotes: 1

Views: 794

Answers (2)

Alain Boudard
Alain Boudard

Reputation: 873

Actually, the square brackets notation is enough for attribute selector.

The initial example would work in my opinion, such as :

@Component({
  selector: '[app-test]',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  @Input('app-test')
  truc: string;

  constructor() { }

  ngOnInit() {
  }

}

and used like that :

<span app-test="toto">bilou</span>

Then maybe you did not import the component in any module of your app :

@NgModule({
  declarations: [
      NavComponent,
      AppComponent,
      TestComponent
  ],

Upvotes: 1

Peter V&#246;geli
Peter V&#246;geli

Reputation: 51

For a component used as attribute you have to write:

selector: 'app-ellipsis-component, [app-ellipsis-component]',

Upvotes: 1

Related Questions