Using Input or declaring in metadata?

Asked

Viewed 694 times

0

have the following doubt:

Today as far as I have seen there are 2 ways to receive information in an Angular Component.

But I doubt the question "performance".

The example below I import the Input from the "@angular/core package":

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

@Component({
    selector: 'app-meu',
    template: `<h1>Meu nome é {{ meuNome }}</h1>`
})
export class MeuComponent {
     @Input('nome') meuNome: string = '';
     constructor() {}
}

Already in the example below I do the same thing, without the need to import

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

@Component({
    selector: 'app-meu',
    template: `<h1>Meu nome é {{ meuNome }}</h1>`,
    inputs: ['meuNome:nome']
})
export class MeuComponent {
     meuNome: string = '';
     constructor() {}
}

In both cases I could use my component, passing the attribute [nome] and function.

But using the @Input() i find it more elegant and easier to orient yourself in developing on what is input Property or what is variable from my class.

Then comes the doubt, the fact of using the @Input() makes code slower? What is best practice?

angular performance typescript

  • The logic of the Developer @Input is to pass values from a Component pai(parent) for a Component filho(children).

  • Thanks @Marconi! I understand the use of the Developer. The question was about the performance itself. That is why there are two ways.

  • Hiago, the way I see it, you didn’t use the decorator correctly, both forms do not require the @Input

  • @Marconi but it was just an example I used at the time to present my doubt.

  • In this example I would use <app-my name="hiago"></app-my>

  • Got it, I thought it’s developing like rs. D

  • What you could do is run the developer tools at 3g slow speed and see which pulls the value in less time than ms or s, I believe it may be that with the note @Input is faster by going directly to the correct method

Show 2 more comments

1 answer

1

According to the style guide Angular is advised to use @Input. The use of @Input may facilitate in some cases. According to this post: angular use input says that in some cases it may not be recognized the variable with the use of inputs within the component.

  • Thanks Renato, but I would just like to know the difference in performance. If there was any difference or not.

Browser other questions tagged angular performance typescript

You are not signed in. Login or sign up in order to post.