CODEWITHSUNDEEP
cssangular
A.Alshaikhli
A.Alshaikhli

Reputation: 437

Add a custom style to the component in Angular

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>

Upvotes: 0

Views: 744

Answers (2)

Artur Noetzel
Artur Noetzel

Reputation: 453

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;
}

Upvotes: 1

Rushi Patel
Rushi Patel

Reputation: 601

Add px which almost equals to 49%.

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

Upvotes: 1

Related Questions