最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin5浏览0评论

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 RochaRicardo Rocha 16.3k23 gold badges84 silver badges139 bronze badges 3
  • 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

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%
}
发布评论

评论列表(0)

  1. 暂无评论