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
:hostselector. 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
1 Answer
Reset to default 10Yes, 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%
}