javascript - How to add styling to the root component dom element (angular selector component)

I have the following ponent:

// Typescript
@Component({
    selector: 'form-button',
    templateUrl: './form-buttonponent.html',
    styleUrls: ['./form-buttonponent.scss']
})
export class FormButtonComponent {}

//form-buttonponent.html
<div class="form-button-wrapper">
    <div class="content"></div>
</div>

//form-buttonponent.scss
.form-button-wrapper {
    width: 100%;
    height: 100%
}

In the html, will looks like this:

<head>...</head>
<body>
    ....
    <form-button>
         <div class="form-button-wrapper">
             <div class="content"></div>
         </div>
    </form-button>
    ....
</body>

I want t defined a width and weight to the <form-button> instead of in the <div class="form-button-wrapper">.

How can I do that?

I have the following ponent:

// Typescript
@Component({
    selector: 'form-button',
    templateUrl: './form-button.ponent.html',
    styleUrls: ['./form-button.ponent.scss']
})
export class FormButtonComponent {}

//form-button.ponent.html
<div class="form-button-wrapper">
    <div class="content"></div>
</div>

//form-button.ponent.scss
.form-button-wrapper {
    width: 100%;
    height: 100%
}

In the html, will looks like this:

<head>...</head>
<body>
    ....
    <form-button>
         <div class="form-button-wrapper">
             <div class="content"></div>
         </div>
    </form-button>
    ....
</body>

I want t defined a width and weight to the <form-button> instead of in the <div class="form-button-wrapper">.

How can I do that?

Share Improve this question asked Feb 3, 2020 at 12:21 Ricardo Rocha 16.3k23 gold badges84 silver badges139 bronze badges

2 use :host selector. blog.angular-university.io/angular-host-context – Vladimir Bogomolov Commented Feb 3, 2020 at 12:23
@VladimirBogomolov Good! Can you write it as a proper answer? – Ricardo Rocha Commented Feb 3, 2020 at 12:28
1 Read this old post you will get your answer :) Styling Angular 2 ponent tag – Zain ul abideen Commented Feb 3, 2020 at 12:28

Add a ment |

1 Answer 1

Sorted by: Reset to default 10

Yes, just use the :host selector. It gives you access to the wrapping angular element.

//form-button.ponent.scss

:host {
 // insert your styles here
}

.form-button-wrapper {
    width: 100%;
    height: 100%
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add styling to the root component dom element (angular selector component) - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)