tengo este tipo de cadena
"<div style="text-align: center;"><b style="color: rgb(0, 0, 0); familia de fuentes: "Open Sans", Arial, sans-serif; text-align:Justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet vestibulum eros, ac aliquam magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ante urna, dictum sed porta ut, consectetur eu felis. Pellentesque eleifend egestas augue, iaculis ultricies nulla volutpat at. Vivamus sagittis est eu rutrum blandit"
que incluye atributos de estilo, quiero vincularlo a mi html, pero intente lo que intente, siempre pierdo algunos estilos como el primero
("<div style="text-align: center;" )
¿Alguna idea de cómo poner esto en mi html sin perder ningún estilo? gracias
Bueno, asumo que has usado la directiva [innerHtml] en tu elemento HTML de esta manera:
// Your *.html template <p [innerHTML]="myUnsafeHtmlString"></p> // Your *.component.ts controller file myUnsafeHtmlString: string = `<div style="text-align: center;"> <b style="color: rgb(122, 122, 122); font-family: 'Open Sans', Arial, sans-serif; text-align: justify;">Lorem ipsum...</b></div>`;En ese caso, Angular bloqueará algunos atributos HTML por razones de seguridad. Tiene información sobre esto dentro de las herramientas de desarrollador de su navegador -> pestaña de consola.
Más información sobre DomSanitizer en Angular: https://angular.io/api/platform-browser/DomSanitizer
Para lograr html "inseguro" en sus plantillas, debe llamarlo explícitamente a través de DomSanitizer. En mi ejemplo, he usado @Pipe para lograr esto, sin embargo, también puede usarlo desde el controlador de componentes.
// Your *.html template <p [innerHTML]="myUnsafeHtmlString | safeHtml"></p> // Your *.pipe.ts @Pipe({ name: 'safeHtml' }) export class SafeHtmlPipe implements PipeTransform { constructor(private sanitized: DomSanitizer) {} transform(value) { return this.sanitized.bypassSecurityTrustHtml(value); } } // Your *.component.ts controller file myUnsafeHtmlString: string = `<div style="text-align: center;"> <b style="color: rgb(122, 122, 122); font-family: 'Open Sans', Arial, sans-serif; text-align: justify;">Lorem ipsum...</b></div>`;Ejemplo completo de stackblitz:
https://stackblitz.com/edit/angular-ivy-yxcwjb?file=src%2Fapp%2Fapp.component.html