ng-content and tooglable text centered

Question

i need my ng content and text to align to center this is the current situation:

<div
    (mouseenter)="mouseEnter()"
    (mouseleave)="mouseLeave()"
    style="text-align: center"
>
    <ng-content></ng-content>
</div>

<span style="text-align: center" *ngIf="isTitleVisable">
    {{ title }}
</span>
<div *ngIf="!isTitleVisable"><br /></div>

state 1

state 2

i want the ng content to stay in place exactly like the 2nd pic but when the text mouse exit the ng-content,the text disapear (as it should) and the content goes left.

Answer 1

Generally you use a variable -sorry if the response is not exact fit to your requirements-, So imagine some like

<div (mouseenter)="on=true"
     (mouseleave)="on=false"
     [style.text-align]="on?'center':null"
>
    <ng-content></ng-content>
</div>

When a mouse enter a variable defined in your .ts becomes true, when the mouse out the variable becomes false. The [style.text-align] is center when the variable is true and null (if is null, angular remove the style.text-align attribute) when is false.

You can use also use a class center in your .css and use some like

  [class.center]="on?true:null"

or

   [ngClass]="on?'center':null"