Change misleading Quickstart example from Hello Angular to Hello World

[anirudh24seven]

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

[anirudh24seven]

Changing the above would mean changing this line as well, to something more suitable:

In the example, change the component class's name property from 'Angular' to 'World' and see what happens.

[Foxandxss]

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]

It is a string.

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 what name='Angular' implied. I expected to see Hello World as the Quickstart output but it was not.