para poner a la derecha v

v.cdk-global-overlay-wrapper {
text-align: -webkit-right !important;
}
________________
html toas

<!-- <div class="info" [@fadeAnimation]="{

value: animationState, params:{
fadeIn: toastConfig.animation.fadeIn, fadeOut:
toastConfig.animation.fadeOut
}
}" (@fadeAnimation.done)="onFadeFinished($event)">
<div style="display: flex;align-items: center;justify-content: center;">

<i class="fas fa-check-circle"></i>

<p>{{ iconType }} {{ data.text }}</p>
<span class="closeAlert" (click)="close()">&times;</span>
</div>
</div> -->

<!-- <div class="info">

<b>Mensaje de informaci�n.
<br>
<div>{{ iconType }} {{ data.text }}</div> </b>
</div> -->
<!-- </div> -->

<!-- <div class="correcto"><b>{{ iconType }} {{ data.text }}</b><span

(click)="close()">&times;</span></div> -->
<!-- <div class="error"><b>{{ iconType }} {{ data.text }}</b></div>
<div class="ojo"><b>{{ iconType }} {{ data.text }}</b></div> -->
<p>Please click one of the button to see a Toast being displayed in the top right
corner of your screen:</p>
<button class="btn btn-primary" (click)="showStandard()" ngbTooltip="Will disappear
in 5s">Standard toast</button>&nbsp;
<button class="btn btn-success" (click)="showSuccess()" ngbTooltip="Will disappear
in 10s">Success toast</button>&nbsp;

<ng-template #dangerTpl>
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" width="24" height="24"
viewBox="0 0 24 24"><path d="M10.872 6.831l1.695 3.904 3.654-1.561-1.79 3.426
3.333.954-3.417 1.338 2.231 4.196-4.773-2.582-2.869 2.287.413-3.004-3.792-.726
2.93-1.74-1.885-2.512 3.427.646.843-4.626zm-.786-6.831l-1.665 9.119-6.512-1.228
3.639 4.851-5.548 3.294 7.108 1.361-.834 6.076 5.742-4.577 9.438 5.104-4.288-8.064
6.834-2.677-6.661-1.907 3.25-6.22-6.98 2.982-3.523-8.114z"/></svg> Danger Danger
!
</ng-template>
<button class="btn btn-danger" (click)="showDanger(dangerTpl)" ngbTooltip="Will
disappear in 15s">Danger toast</button>&nbsp;

<app-toasts aria-live="polite" aria-atomic="true"></app-toasts>

___________________
csss_toas

.info,
.correcto,
.ojo,
.error,
.validation {
border: 1px solid;
margin: 0px 10px;
padding: 10px;
background-repeat: no-repeat;
background-position: 10px center;
font-family: Arial, Helvetica, sans-serif;
/* font-size: 13px; */
/* text-align: left; */
width: 300px;
margin-bottom: 15px;
}

.info {
color: #00529B;
background-color: #BDE5F8;
display: flex;
max-height: 70px;
/* background-image: url('imagenes/info.jpg'); */
}

.correcto {
color: #4F8A10;
background-color: #DFF2BF;
display: flex;
max-height: 70px;
/* background-image:url('imagenes/correcto.JPG'); */
}

.ojo {
color: #9F6000;
background-color: #FEEFB3;
display: flex;
max-height: 70px;
/* background-image: url('imagenes/ojo.JPG'); */
}

.error {
color: #D8000C;
background-color: #FFBABA;
display: flex;
max-height: 70px;
/* background-image: url('imagenes/error.jpg'); */
}

.closeAlert {
position: relative;
right: 20px;
top: 5px;
cursor: pointer;
}

____________________________
<div *ngIf="this.iconType=='success'" class="alert alert-success" style="width:
300px;">
<div class="col-md-12" style="text-align: initial;line-height: 10px">
<span (click)="close()" class="closeAlert">&times;</span>
<p> <i class="fas fa-check-circle"></i> ejemplo de titulo </p>
<b>{{ iconType }} {{ data.text }}</b>
</div>
</div>
<div *ngIf="this.iconType=='info'" class="alert alert-info" style="width: 300px;">
<div class="col-md-12" style="text-align: initial;line-height: 10px">
<span (click)="close()" class="closeAlert">&times;</span>
<p> <i class="fas fa-question-circle"></i> ejemplo de titulo </p>
<b>{{ iconType }} {{ data.text }}</b>
</div>
</div>
<div *ngIf="this.iconType=='warning'" class="alert alert-warning" style="width:
300px;">
<div class="col-md-12" style="text-align: initial;line-height: 10px">
<span (click)="close()" class="closeAlert">&times;</span>
<p> <i class="fas fa-exclamation-circle"></i> ejemplo de titulo </p>
<b>{{ iconType }} {{ data.text }}</b>
</div>
</div>
<div *ngIf="this.iconType=='danger'" class="alert alert-danger" style="width:
300px;">
<div class="col-md-12" style="text-align: initial;line-height: 10px">
<span (click)="close()" class="closeAlert">&times;</span>
<p> <i class="fas fa-exclamation-triangle"></i> ejemplo de titulo </p>
<b>{{ iconType }} {{ data.text }}</b>
</div>
</div>
toas