Add a custom style to the component in Angular

Question

I am still new in angular 7. I have a form with title directive and div. I am trying to set both of them in same row with 49% width in side the form. The div style work fine but in the title component doesn't take the style. the problem is i need to change the title directive only in the current form. is there any way to do that? many thanks

<form #taskForm="ngForm" (ngSubmit)="onSubmit()">

    <my-title   [style.width]='49%' [title]="'title.page'" [wikiUrl]='wikiUrl' icon="work">
    </my-title>

   <div [style.width]='49%'> 
    <button>Save</button>
   </div>

</form>

Answer 1

Add px which almost equals to 49%.

 <div [ngStyle]="{'width.px': 490px}"> 
       <button>Save</button>
    </div>

Answer 2

If you want to set a width in percent you can also use the following syntax:

<div [style.width.%]="49">...</div>

The real problem however seems to be that the 'my-title' component is not responding to the width rule. This is probably because 'my-title' is not a known html tag and so there is no default rendering behavior in the browser for it.

If you want your component tag to behave like a block element (that is what a div element is rendered like) then you just have to apply the rule display: block; to it.

Since your component tag is not part of your template, but the wapper for it you can either apply the following style to the parent component that is using the 'my-title' component:

/* this will not work inside the css file of the 'my-title' component:*/
my-title {
    display: block;
}

...or you can use the :host selector in the css/scss file of the 'my-title' component, which is probably better in this case:

:host {
    display: block;
}