app.component.html

<list rangerListData></list>

list.component.html

<button (click)="nqRefresh.emit({})">Refresh</button>
<table>
  <tr>
    <th>Name</th>
  </tr>
  <tr *ngFor="let item of nqData">
    <td>{{item.name}}</td>
  </tr>
</table>

list.component.ts

@Component({
  providers: [provideNqConnectedComponent(ListComponent)],
  selector: 'list',
  templateUrl: 'list.component.html'
})
export class ListComponent implements NqConnectedComponent {
  @Input() nqData: Ranger[];
  @Output() nqRefresh: EventEmitter<any> = new EventEmitter();
}