igxLabel should engage with input field and float above the input field when focused. igxLabel could be used as standalone component to represent some string.

The igxLabel directive is intended to be used on single-line text elements to add additional CSS styles. It is especially useful when combined with igx-switch, igx-checkbox, and or igx-avatar components.

As a developer I want to be able to easily transform element to a label by using angular directive principles. Also I want to combine that text with other components.

<target-element igxLabel [..options]>Click me</target-element>

In combination:

<div class="igx-form-group">
    <input type="text" igxInput [(ngModel)]="user.name"/>
    <label igxLabel>Username</label>
</div>

• Standalone text content.
• With association with other components (example: input).

1. Show plain text (content).
2. Floating inline Label that moves above certain field. When text is entered in some input, the label moves above the input field and changes its font-size and color.

The Label should always display text or any other string representation.

Use it as directive to span element for example:

<span igxLabel>Some text<span>