Why is input not working for my angular component?

Question

I have an angular class:

@Component({
  selector: 'main-title',
  styleUrls: ['main_title.scss'],
  template: `
      <ng-template>
          <div class="main-title">
              <h2 [ngClass]="{'-small': isSmall }"
                  class="{{titleClassName}}" data-cy="main-title">{{title}}</h2>
          </div>
      </ng-template>
  `,
})
export class MainTitle extends NoRootTagComponent {

  /**
   * Accepts strings or array (will map to multiple lines)
   */
  @Input('title')
  title: string

  @Input('titleClassName')
  titleClassName = ''

  @Input()
  isSmall?: boolean

  constructor(vcRef: ViewContainerRef, public router: AsyncRouter) {
    super(vcRef)
  }
}

and using it like this:

<main-title
  [isSmall]="true"
  titleClassName="h5"
  title="please verify your zip code."></main-title>

However I don't see the boolean is isSmall being passed. It remains undefined for some reason. Is it because of the NoRootTagComponent? I can't figure out why this is happening.

I didn't show it here, but I used `console.log(this.isSmall)` in `ngOnInit` and it shows undefined. — nyphur, Jun 29 '19 at 01:32
can you try omitting the question mark from the `isSmall` variable name ? — Stavm, Jun 29 '19 at 04:20
@Spacebear5000, if you don't want a tag, you can use attributte selector https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag. I supouse your problem is how is implemented NoRootTagComponent. you need pass a "context" to view, or get the reference of the Embebd component and give the value — Eliseo, Jun 29 '19 at 10:41

score 0 · Answer 1 · answered Jun 29 '19 at 01:31

0

Wherever you insert the ng-template will be place where the isSmall is checked, so that is why its giving undefined, you need not pass isSmall to the child component instead define it in the component where the ng-template is inserted!

answered Jun 29 '19 at 01:31

Naren Murali

19,250
3
27
54

So you mean in the parent component? – nyphur Jun 29 '19 at 01:32
@Spacebear5000 Yes, but in your case, you will need to set the context, check this example for [reference](https://stackblitz.com/edit/ng-template-outlet) – Naren Murali Jun 29 '19 at 01:34
@Spacebear5000 If you're going for `ng-template` inside the a component, then it does not serve a purpose since the child component will not render anything right? – Naren Murali Jun 29 '19 at 01:41
I'm not entirely sure what you mean. `titleClassName` and `title` work as it. Why wouldn't `isSmall` work in this case? – nyphur Jun 29 '19 at 01:56
@Spacebear5000 can you provide a working stackblitz with the issue!, the data provided isn't sufficient? – Naren Murali Jun 29 '19 at 01:57

Franco Roura · Answer 2 · 2019-06-29T02:13:29.607

Wild guess here; the problem lies within the SCSS definition of the styles.

Are you trying to do something like this?

.main-title {
    color: blue;

    &-small {
        font-size: 8px;
    }
}

Because your component is going to render as <h2 class="some-class -small"> (Notice the space) and a style rule like the one above is not going to be applied.

Instead I'd suggest something like this for your component's template:

  <div class="main-title">
    <h2 class="{{ isSmall? titleClassName+'-small' : titleClassName }}" data-cy="main-title">
      {{title}}
    </h2>
  </div>

Also, notice I removed the <ng-template> tag. You don't need it for this component. Hope this helped you.

Why is input not working for my angular component?

2 Answers2