Angular 5 parametrized component using @Input

Question

I'm new to Angular and looked around but couldn't find the answer...

How do you pass a parameter to a component (html) that is using @Input ?

What I'm trying to achieve is quite simple, I have a LogoComponent which I'd like to call from 2 places: the LoginComponent (there it should be full size) and from the DashboardComponent (where its size is parametrized) but I'm getting an exception:

Uncaught Error: Template parse errors: Can't bind to 'size' since it isn't a known property of 's-logo'. 1. If 's-logo' is an Angular component and it has 'size' input, then verify that it is part of this module.

logo.component.ts (simplified for the sake of lisibility)

@Component({
    selector: 's-logo',
    template: `<div>{{size}}</div>`,   <----- size would actually set the css height 
})
export class LogoComponent{
  @Input() size: string ;
}

login.component.html (simplified)

<s-logo [size]="100px"></s-logo>

I also tried with the syntax, with no luck (double + single quotes):

<s-logo [size]="'100px'"></s-logo>

Isn't that how I'm supposed to achieve this ?

Thats the correct way to pass Input, but there is no height anywhere. I suspect somewhere you do like <s-logo [height]="100px"></s-logo> — Julius Dzidzevičius
– Julius Dzidzevičius, Commented Apr 29, 2018 at 15:04
have you registered your component with @NgModule declarations array? — Vikas
– Vikas, Commented Apr 29, 2018 at 15:13

MilesStanfield · Accepted Answer · 2018-04-29 15:06:22Z

1

Can't bind to 'height' since it isn't a known property

your problem isn't with @Input size, it's that your trying to pass in a different variable called height.

You will need to make an @Input for height as well if it is something your are trying to pass in

answered Apr 29, 2018 at 15:06

MilesStanfield

4,6491 gold badge24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Qualaelay Over a year ago

You were right, in some other forgotten file, <s-logo> was referring to a wrong variable name... duh!

Collectives™ on Stack Overflow

Angular 5 parametrized component using @Input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related