100% на полную ширину - это уродливо, я вам это предоставлю. Однако давайте возьмем компонент / форму входа в систему и преобразуем его в угловую форму
<div class="login-wrapper">
<form class="login" clrForm>
<section class="title">
<h3 class="welcome">Welcome to</h3>
MyApp
</section>
<div class="login-group">
<clr-input-container>
<input clrInput class="username" type="text" id="username" name="username" placeholder="Username" [(ngModel)]="username">
</clr-input-container>
<clr-password-container>
<input clrPassword id="password" name="password" [(ngModel)]="password" />
</clr-password-container>
<div class="checkbox">
<input type="checkbox" id="rememberme">
<label for="rememberme">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">SIGN IN</button>
</div>
</form>
</div>
это дает эту уродливую форму

Так как бы вы это стилизовали? Я попытался добавить
.clr-control-container {
width: 100% !important;
}
к компоненту входа scss, но он не работает