Trouble with Angular Component in Tutorial

Question

I'm reading Angular in Action from Manning. Chapter 2 shows me how to write my first component but the example is outdated. I can't figure out how to update it. I'm using Angular CLI version 7.1.3.

Angular CLI generates this:

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-summary',
    templateUrl: './summary.component.html',
    styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
    constructor() { }
    ngOnInit() {
    }
}

The book assumes that Angular CLI will generate this:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'summary',
  styleUrls: ['./summary.component.css'],
  templateUrl: './summary.component.html'
})
export class SummaryComponent {
  @Input();
}

What is the difference between @Input and OnInit? How does a person take an input example and translate it into the "OnInit" way of doing things?

Yes, I tried the message board the publisher provided for the book. No one home. — Tachyon80
– Tachyon80, Commented Dec 28, 2018 at 17:25
I just checked the book. Page 42 first line is: @Input() stock: any; — robert
– robert, Commented Dec 28, 2018 at 17:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

@Input and ngOnInit are two different directives and do not conflict or replace each other.

You can quite easily (manually) add @Input to the generated component and continue as per the book. Just ignore the ngOnInit for now until you learn to use it. It won't hurt to just leave it there.

If you want to know what ngOnInit does, look here

Also notice, if your example deals with the styles, then the CLI has generated sccs but the book has css. sccs should technically take all css and should just work.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 28, 2018 at 17:32

Aragorn

5,3295 gold badges28 silver badges40 bronze badges

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

Comments

Maarti · Accepted Answer · 2018-12-28 17:36:58Z

2

@Input() is a decorator that adds metadata to the class that makes the property, which will be written next to it, available for data-binding.

ngOnInit() is a lifecycle hook that Angular calls shortly after creating the component.

Both still exist in the current version of Angular but do not have utility if they are empty (same for the constructor() method) so you can replace all your code by:

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

@Component({
    selector: 'app-summary',
    templateUrl: './summary.component.html',
    styleUrls: ['./summary.component.scss']
})

export class SummaryComponent  {

}

You'll always be able to add them whenever you want.

answered Dec 28, 2018 at 17:36

Maarti

3,7294 gold badges20 silver badges36 bronze badges

Comments

veben · Accepted Answer · 2018-12-28 17:38:29Z

1

@Input is a decorator. It allows you to mark a field as an input argument. You can, for example, pass an argument from a parent component to a child component.

OnInit is an interface. It allows you to handle additional initialization tasks under ngOnInit method, which occurs at component creation.

edited Dec 28, 2018 at 17:38

answered Dec 28, 2018 at 17:30

veben

22.7k15 gold badges70 silver badges85 bronze badges

Collectives™ on Stack Overflow

Trouble with Angular Component in Tutorial

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related