Declaring inputs in the component declaration instead using @Input?

Question

The Angular Material Toolbar is declared like this:

@Component({
  selector: 'mat-toolbar',
  exportAs: 'matToolbar',
  templateUrl: 'toolbar.html',
  styleUrls: ['toolbar.css'],
  inputs: ['color'],
...

})

Is using inputs: ['color] in the component declaration the same as putting @Input() color in the class body?

Also anyone know what the purpose of exportAs is?

I did but it's so generic ... for example for exportAs it says: Defines the name that can be used in the template to assign this directive to a variable. — Ole
– Ole, Commented Oct 20, 2020 at 21:25
OK - I looked at the export as example and it looks like it allows us to take what would be an element / component directive and turn it into an attribute directive, IIUC. So for example if we wanted to take a div and turn it into a mat-toolbar component we could do <div matToolbar ...> essentially upgrading a div element to a mat-toolbar component? I assume the div then also gets properties like color etc? — Ole
– Ole, Commented Oct 20, 2020 at 21:37

Andrei · Accepted Answer · 2020-10-20 23:13:54Z

1

exportAs: 'matToolbar' allows you to make use of your toolbar in the template. example:

<mat-toolbar #myToolbarReference="matToolbar">
...
</mat-toolbar>
{{myToolbarReference.color}}

this property says that the component instance (here MatToolbarComponent instance) could be exported from this element via matToolbar string.

answered Oct 20, 2020 at 23:13

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

2 Comments

Ole Over a year ago

Cool - I was always wondering why they assigned the tag to a value like that. Any thoughts on the input part?

Andrei Over a year ago

inputs is the same as marking all the inputs with @Input decorator

Collectives™ on Stack Overflow

Declaring inputs in the component declaration instead using @Input?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related