Using two-way binding and angular2-markdown module

I have an app that uses angular-2 markdown. Whatever user type in the textarea with the right format of markdown, the page should display the preview at runtime below. Just like writing questions in stackoverflow. Here is my form in html:

<div class="row align-row">
  <div class="col-md-6">

   <form #f="ngForm" (ngSubmit)="save(f.value)">

  <div class="form-group">
    <textarea class="form-control" id="post" rows="15" placeholder="Enter your post" [(ngModel)]="post.post" name="post" required></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  </div>
     <div class="col-md-6">
       <p>Preview</p>
    <markdown>
    
  </markdown>

 </div>
</div>

And here is my component:

import { Component, OnInit } from '@angular/core';
import { PostService } from './../../services/post.service';
import { CategoryService } from './../../services/category.service';

@Component({
  selector: 'app-create-post',
  templateUrl: './create-post.component.html',
  styleUrls: ['./create-post.component.css']
})
export class CreatePostComponent implements OnInit {
  categories$;
  post = {};

  constructor(categoryService: CategoryService, private postService: 
PostService) { 
    this.categories$ = categoryService.getCategories();
   }

  save(post){
    this.postService.create(post);
  }

  ngOnInit() {
  }

}

I have successfully implemented and installed markdown module. The problem is, there is no preview. I see the preview without <markdown></markdown> but not with it.