Collection Data isn't refreshed when added data

help
1

When I add data to collection using ‘insert’ method, It goes to well.

But data on my template pane using *ngFor doesn’t refreshed automatically.

So I should refresh browser using ‘f5’.

@Component({
	selector: 'my-canvases',
	template: `
	<form (ngSubmit)="addCanvas(newText)">
		<input [(ngModel)]="newText" type="text" name="text" placeholder="Type to add text"/>
	</form>
	<div class="slide" *ngFor="let canvas of first_canvases">{{canvas.text}}</div>
	`,
	styles: [ `
	.mycanvases {
		height: 100%;
		position: absolute;
		width: 100%;
		background: pink;
	}` ],
})

export class CanvasesComponent {
	newText = '';
	canvases = CANVASES;

	first_canvases = this.get_canvases();

	get_canvases(): Canvas[] {
		return CanvasContents.find().map((messages: Canvas[]) => { return messages; });
	}

    addCanvas(newText): void {
		this.canvases.push({
			id: 'New Slide',
			text: 'I made a new slide!',
		});
		CanvasContents.insert({
			text: newText,
			createdAt: new Date
		});
		this.newText = '';
	}
..

I used this code

I used

first_canvases = this.get_canvases();

variable for my *ngFor loop

<div class="slide" *ngFor="let canvas of first_canvases">{{canvas.text}}</div>

and add data function

    addCanvas(newText): void {
		this.canvases.push({
			id: 'New Slide',
			text: 'I made a new slide!',
		});
		CanvasContents.insert({
			text: newText,
			createdAt: new Date
		});
		this.newText = '';
	}