components and Input() setting properties

Question

I'm learning Angular 6 and when learning how to pass data from a parent component into a child component it was shown that we should add an Input() property into the child which is what the parent will populate.

My question was, if i'm just creating a component with a property, like elementId, that it going to be set when i use the element. It will not be passed into it from another component, but hardcoded like:

<my-component elementId='xyz'>

the guide i'm seeing is creating that elementId as an Input() in the component. I thought earlier guides i read never did that, it was just declared as a regular property in the component class, without the Input()

Is the Input() always needed, or just when passing data from parent into child?

I have included the code the author used:

import { Component, OnInit, Input } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'simple-modal',
  templateUrl: './simple-modal.component.html',
  styleUrls: ['./simple-modal.component.css']
})
export class SimpleModalComponent implements OnInit {
  @Input() title: string;
  @Input() elementId: string;

  constructor() { }

  ngOnInit() {
  }

  closeModal() {

  }

}

Component is used within another component as:

<simple-modal elementId="searchResults" title="Matching Sessions">
  <div class="list-group">
    <a class="list-group-item" *ngFor="let session of foundSessions" [routerLink]="['/events', session.eventId]">{{session.name}}</a>
  </div>
</simple-modal>

How are you planning on accessing elementId inside my-component if you don't use @Input()? — Zze
– Zze, Commented Feb 16, 2019 at 23:26
OP says that fields with the same names will be populated @Input but not bound. — Antoniossss
– Antoniossss, Commented Feb 17, 2019 at 0:16
Out of curiosity, why not use Angular 7 (soon to be Angular 8)? — theMayer
– theMayer, Commented Feb 17, 2019 at 0:42
If i add [] around the title or elementId the code errors, else it works — Paritosh
– Paritosh, Commented Feb 17, 2019 at 1:33
@Zze I want to use it but i wanted to know why the its not [elementId]? The examples i saw earlier using @Input() always have the attribute in [] but not here — Paritosh
– Paritosh, Commented Feb 17, 2019 at 3:33

Antoniossss · Accepted Answer · 2019-02-17 00:31:21Z

3

Input allows you to do bindings in template (in HTML markup, not in OOP manner). They are updated in async way and updating such input will invoke onChange callback. You cant have that with simple property.

EDIT:

Out of curiosity I have checked your statement and the answer is NO, it wont be set. https://stackblitz.com/edit/angular-xtkgt4

edited Feb 17, 2019 at 0:31

answered Feb 16, 2019 at 22:27

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

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

5 Comments

Paritosh Over a year ago

but without @Input() the elementId would still populate correct? just it won't happen async and not trigger the onChange. as i've seen examples where properties were used without Input(). that's why I was trying to figure out why it was done that way, otherwise i've only seen it when parents are passing values ot children

Paritosh Over a year ago

I found this which explains it as well: angular.io/guide/template-syntax#remember-the-brackets

Paritosh Over a year ago

I have included the author's code, i'm still curious why it works, and when i add [] around the elementId and title attributes it errors with a template error.

Antoniossss Over a year ago

@Paritosh there are @Input() annotation everywhere in that code you have provided.

Antoniossss Over a year ago

When you use elementId="sometext" than it is equal to [elementId]="'sometext'". When you use [] then whats following is expected to be an expression, while without brackets it will be threated as simple string. @Input is required in both cases. Moreover, in code you have quoted, @Inputs are used in contrary to what you have stated.

theMayer · Accepted Answer · 2019-02-17 00:47:04Z

0

This is one of those cases where the answer is "because that's what the documentation says."

Angular requires the Input() directive for template binding to component properties. Angular does not make a distinction between a "hard-coded" value and a dynamic value. If you want to supply the value of a child component from a template parent, you have to use Input() decorator.

Frankly, even if you could get away without the Input() decorator, this would almost certainly be a programming mistake and would be horrible design practice.

answered Feb 17, 2019 at 0:47

theMayer

16.3k8 gold badges65 silver badges93 bronze badges

Comments

Chris Tapay · Accepted Answer · 2019-02-17 00:52:00Z

0

The @Input decorator will create a binding for the property (in your case elementId), therefore it will be checked in every change detection cycle.

If your property will never change, there is an alternative: @Attribute decorator, which is read just once.

You may use it this way:

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

@Component({
  selector: 'my-component',
  template: `<label>{{ elementId }}</label>`
})
export class MyComponent {
  constructor(@Attribute('elementId') public elementId: string) { }
}

answered Feb 17, 2019 at 0:52

Chris Tapay

1,02310 silver badges21 bronze badges

Collectives™ on Stack Overflow

components and Input() setting properties

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related