Mdb-ui-kit: Overlap issue using [(ngModel)] in Angular2

[MasDevProject]

Hi,
first of all thnks for your great job.

I'm using Anguar2 + bootstrap-material-design, the problem is that if I set the text of a "form-group label-floating" the placehodler doenst go above the value.

This is the problem's screenshot:
https://postimg.org/image/dtwz4d6nb/

Is there a way to avoid this issue?
Thanks a lot

[SergeyKhval]

Floating label should not be used in conjunction with placeholder. Simply remove your placeholder text, I think there is no other workaround for this

[MasDevProject]

Thanks for the answer,
I wrote placeholder but actually I'm using control-label.

This is the actual code:
<div class="form-group label-floating"> <label class="control-label" for="rs">Firstname</label> <input class="form-control" id="rs" type="text" [disabled]="!editMode" [(ngModel)]="company.name"> <span class="material-input"></span></div>

[SergeyKhval]

@MasDevProject could you please provide test example? This is a starting template on codepen, but I'm not sure if codepen currently supports angular 2. May be you could provide a test case on Plunker?

[DzmitryShylovich]

Do u load your form dynamically via router?

If so the problem is similar to this issues: #613 #867 and many more.

The problem is that you need to call $('body').bootstrapMaterialDesign() every time you load new dynamic template.

Solution from angular 1 with arrive.js doesn't work for me. Looks like arrive.js have some incompatible issues with zone.js.

You can use in your component:

ngOnInit(): any {
      $('#your-form').bootstrapMaterialDesign();
  }

It works but I'm looking for better approach.

Update:
I've created simple directive:

import { Directive, ElementRef, OnInit } from 'angular2/core';

declare var jQuery: any;

@Directive({selector: '[bmdBoot]'})
export class BmdBootDirective implements OnInit {

  constructor(private _element: ElementRef) {
  }

  ngOnInit(): any {
    jQuery(this._element).bootstrapMaterialDesign();
  }
}

Usage:

<form bmdBoot id="" ...>
</form>