جافاسكريبت - كيفية إضافة تنسيق إلى عنصر دوم للمكون الجذري (مكون محدد Angular)

لدي المكوّن التالي:

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

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

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

في الـ HTML، سيبدو هكذا:

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

أريد تحديد العرض والوزن لـ <form-button> بدلاً من ذلك في <div class="form-button-wrapper">.

كيف يمكنني فعل ذلك؟

الإجابة رقم 1

نعم، ببساطة استخدم المحدد :host. فهو يمنحك الوصول إلى عنصر Angular المغلف.

//form-button.component.scss

:host {
 // insert your styles here
}

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