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

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss']
})
export class UserListComponent implements OnInit {
names: any ;


  constructor() {
    this.names = [{title:'Ari'},{title:'Carlos'},'Felipe','Nate'];
   }

  ngOnInit() {
  }

}

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

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.scss']
})
export class UserItemComponent implements OnInit {

@Input() name: any;

  constructor() {



   }

  ngOnInit() {
  }

}

<ul>
  <li *ngFor="let name of names">
    <app-user-item [name] = "name"></app-user-item>
  </li>
</ul>

<h1>
Hello {{name.title}}
</h1>