EventEmitter is intended for use with @Output() bindings, because it has the option to emit values asynchronously. Don’t use it with shared services.

<hello *ngIf="name"></hello>

The above creates the component when a value is emitted. After the value is emitted the component will subscribe to the service, but EventEmitter does not keep a history of previously emitted values. So nothing is received by the component.

See constructor:

https://angular.io/api/core/EventEmitter#constructor

It is rare that you need this feature, but there are cases were an @Output() binding needs to emit a value during the next change detection cycle. So in those cases you need to use EventEmitter, but you can use other Observable subjects as emitters for bindings.

but if a click again then the name appears

After the component is created it will receive emitted values, and the second time you click the button a second value is emitted which appears in the template of the component.

Most people who create a shared service will use BehaviorSubject with a default value, or ReplaySubject if they need to wait until a value can be emitted.

In the above example you have the logic *ngIf="name" which means you want to wait until a value is emitted. So you would use a new ReplaySubject(1) instead of EventEmitter.

export class NameService {
  show = new ReplaySubject(1);
}

That’s because you are using *ngIf on hello app selector. Which will not initialize the hello component until the name variable in app.component.ts has value in it. So as you click on emit first time the name variable will be assigned a value first then your hello component will be initialized.
Then after your second click the name variable inside hello app will get assigned value “world” and then it will be displayed.

Solution is as below.

<hello>
  <label *ngIf="name">
    {{name}}
  </label>
</hello>
<show></show>

I want to use eventemiter to send a name when a click a button but does not work. The first time I click the button the name is not showed but if a click again then the name appears.
https://stackblitz.com/edit/angular-ue9dzk-extrange-emit

app.component.html

<hello *ngIf="name"></hello>
<show></show>

app.component.ts

import { Component } from '@angular/core';
import { NameService } from './name.service';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  name: string;
  constructor(private nameService: NameService) {

  }

  ngOnInit() {
    this.nameService.show.subscribe(name => {
      this.name = name;
    })
  }
}

hello.component.ts

import { Component, Input } from '@angular/core';
import { NameService } from './name.service';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  name: string;
  constructor(private nameService: NameService) {

  }

  ngOnInit() {
    this.nameService.show.subscribe(name => {
      this.name = name;
    })
  }
}

name.service.ts

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

export class NameService {
  show = new EventEmitter();
}

show.component.ts

import { Component, Input } from '@angular/core';
import { NameService } from './name.service';

@Component({
  selector: 'show',
  template: `<button (click)="show()">Click to emit</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ShowComponent  {
  name: string;
  constructor(private nameService: NameService) {

  }

  show() {
    this.nameService.show.emit('World');
  }

}