更改 intl-tel-input 字段宽度（以角度为单位）

Question

I have using the Nebular ngx-admin template in my angular application. Also using ng2-tel-input for mobile number input. I am having the below HTML code

<div class="form-control-group">
          <label class="label" for="input-mobile">Mobile<span class="text-danger"> *</span></label>
          <input nbInput type="text" id="input-mobile" class="input-mobile" name="mobile" placeholder="Mobile" fullWidth fieldSize="large" formControlName="mobile" inputmode="numeric" digitOnly [status]="status(formcontrols.mobile)"
            ng2TelInput [ng2TelInputOptions]="{initialCountry: 'in'}">
</div>

but after building the Angular application. it looks like the below code. I found it by developer tools in the browser

Issue:

Unable to change the width of the input field like other fields shown in the above picture.

Tried

I have changed the width of the iti class directly in the developer tools like below

.iti {
width:100%;
}

It is working well. But I can't apply width property from styles file like below

in component.scss

.iti {
  width: 100%;
}

Answer 1

它终于对我有用了。我使用过以下内容，

在组件.scss中

:host ::ng-deep .iti {
  width: 100%;
}

这样做的原因

由于 Angular 中的样式封装，因此未应用样式。请参阅此链接了解更多信息。