New Item for Angular

new-tweet.component.html

<form (ngSubmit)="onAdd()">
  <div class="form-group">
    <input
      type="text" name="content"
      placeholder={{placeholder}}
      [(ngModel)]="model.content">
    </input>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

new-tweet.component.ts

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

@Component({
  selector: 'app-new-tweet',
  templateUrl: './new-tweet.component.html'
})
export class NewTweetComponent implements OnInit {
  @Input() placeholder: string = "";
  @Output() add = new EventEmitter<any>();
  model = {content: ''};

  constructor() { }

  ngOnInit() {}

  onAdd() {
    return this.add.emit(this.model)
  }
}

tweets-list.component.html

<div>
  <ul class="list-unstyled">
    <li class="media">
      <div class="media-body">
        <app-new-tweet placeholder="Add your text..." (add)="onAdd($event)"></app-new-tweet>
      </div>
    </li>
    <!-- List items -->
  </ul>
</div>

tweets-list.component.ts

// ...import

@Component({
  selector: 'app-home',
  templateUrl: './tweets-list.component.html',
  styleUrls: ['./tweets-list.component.css']
})
export class ListTweetsComponent implements OnInit {
  // ...constructor, ngOnInit

  onAdd(tweet) {
    this.backendService.addTweet(tweet)
      .then((data) => {
        if (data && data.createTweet) this.tweets.unshift(data.createTweet);
      })
      .catch((error) => {
        console.log(error);
      });
  }
}