Repository navigation
Change misleading Quickstart example from Hello Angular to Hello World #3505
Description
In the example of a component that displays a simple string:
import { Component } from '@angular/core';
@component({
selector: 'my-app',
template:<h1>Hello {{name}}</h1>
})
export class AppComponent { name = 'Angular'; }
the example export class AppComponent { name = 'Angular'; } is very misleading for newcomers. It is hard to know whether Angular is a keyword or a core concept or just an example text.
I would recommend changing it into export class AppComponent { name = 'World'; } or something equivalent instead.
Proposed change:
Actual:
import { Component } from '@angular/core';
@component({
selector: 'my-app',
template:<h1>Hello {{name}}</h1>
})
export class AppComponent { name = 'Angular'; }
Expected:
import { Component } from '@angular/core';
@component({
selector: 'my-app',
template:<h1>Hello {{name}}</h1>
})
export class AppComponent { name = 'World'; }
Actual's output:
Hello Angular
Expected output:
Hello World
Activity
anirudh24seven commentedon Apr 5, 2017
Changing the above would mean changing this line as well, to something more suitable:
Foxandxss commentedon Apr 5, 2017
I don't see it. It is a string. If it were a non string or somethihng, I would agree perhaps, but as a string, I don't think there is much confusion.
anirudh24seven commentedon Apr 5, 2017
By that logic, the selector name is a string too. But it ends up as a new HTML tag.
selector: 'my-app'-><my-app>As a newbie to Angular, it was confusing because of the above counter-example of a string. Anecdotally, a newbie like me is bound to think that
name='Angular'would be important too (although it is not).Also to consider that the documentation shows the code before showing the output. If the reader knew that the output would be
Hello Angular, they would know whatname='Angular'implied. I expected to seeHello Worldas the Quickstart output but it was not.