Angular with svg: Refused to load plugin data from ‘XXX’ because it violates the following Content Security Policy directive: "object-src ‘none’"

HTML: <object class="flag me-2" [attr.data]="getFlag(currentLang) | safe:’resourceUrl’"> </object> which will be rendered to: <object class="flag me-2 data="../../../assets/images/lang/en.svg"> the pipe is used to sanitize the resource url. This gives an error (local it works fine but when I publish/release this the error will ocurr) Refused to load plugin data from ‘https://mysite/assets/images/lang/en.svg’ because it violates the following […]

By Babulaas
Published
Categorized as angular, content-security-policy, svg Tagged , ,

angular template binding – svg data property

I have a svg (object element) and I like to change a part of the data property with an if else statement. I can use ng template but if that is not necessary I rather not use it for keeping my code clean. <object class="flag me-2" data="`../../../../assets/images/lang/${currentLang === ‘nl’: ‘en’ ? ‘nl’}.svg`"> </object> normal: ../../../../assets/images/lang/en.svg […]

By Babulaas
Published
Categorized as angular, data-binding, svg Tagged , ,

Translate text in a custom angular pipe (ngx-translate)

I am using ngx-translate for my translations in my angular app. In a custom pipe I have some text that need to be translated. pipe: import { Pipe, PipeTransform } from ‘@angular/core’; import { Something} from ‘../domain’; @Pipe({ name: ‘someDescription’ }) export class SomeDescriptionPipe implements PipeTransform { transform(value: Something, args?: any): string { switch (value) […]

By Babulaas
Published
Categorized as angular, ngx-translate Tagged ,

Angular ngx-translate usage in typescript object array

I am using ngx-translate for translation. In my typescript file I have a array of objects. how can I use a i18n key in this array? shortcutList: Shortcut[] = []; constructor(private translate: TranslateService){} this.shortcutList = [ { text: this.translate.get(‘shortcuts.some-key’), icon: ‘fa-calendar-alt’}, { text: this.translate.get(‘shortcuts.some-key2’), icon: ‘fa-users’}, { text: this.translate.get(‘shortcuts.some-key3′), icon:’fa-archway’} ]; I need a simple […]

By Babulaas
Published
Categorized as angular, json, ngx-translate Tagged , ,

Angular How to fill an array with custom objects with default values

I am trying to fill an array with custom objects. The icon property is optional and when it’s not provided it must use a default value. class type: export class Shortcut { text: string; icon?: string = ‘fa-external-link’; } typescript dashoard component export class DashboardComponent implements OnInit { shortcutList: Shortcut[] = []; ngOnInit() { this.getShortcuts(); […]

By Babulaas
Published
Categorized as angular, typescript Tagged ,

Angular 12 update – The Angular Compiler requires TypeScript

I have updated my project to the latest angular version. After updating with "ng update" I receive the message that everything is up to date. (The last step in my process. The required packages are already updated) Nice, but when I serve the project I get the following error: Error: The Angular Compiler requires TypeScript […]

By Babulaas
Published
Categorized as angular, angular-cli, typescript Tagged , ,

Set a default (select) option in combination with ngModel

I have component which includes a select. the options are set with an @Input and bind witn ngModel. However I can not set the default with this combination. My component: export class someComponent { @input() options: any[]; @Input() selectedOption: any; @Output() optionChanged = new EventEmitter<any>(); onOptionChanged() { this.optionChanged.emit(this.selectedOption); } } HTML: <select *ngIf="options" [(ngModel)]="selectedOption" (change)="onOptionChange_select(selectedOption)"> […]

PrimeNg p-tabpanel bind headerStyleClass

I am using the tabview component from prime NG and for some reason I cannot bind a header style class. HTML (this works but is static) <p-tabPanel header="Title" headerStyleClass="badge" formGroupName="groupName"> I like to use headerStyleClass with a condition: (this does not work) <p-tabPanel header="Title" [headerStyleClass]="{‘badge’: formGroup.get(‘groupName’).dirty}" formGroupName="groupName"> How can I bind the class property? Source: […]

By Babulaas
Published
Categorized as angular, css, html, primeng Tagged , , ,

check if (child) form is dirty in nested reactive forms

I have a form with different sections (nested formgroups) How can you check if something changes in a specific section. HTML: <div [formGroup]="formGroup"> <div formGroupName="one"> <input type="text" formControlName="email"> <input type="text" formControlName="name"> <div> </div> TS: export class someClass implements OnInit { formGroup = this.formBuilder.group({ one: this.formBuilder.group({ email: [null, [Validators.required, Validators.pattern(‘^[a-z0-9._%+-][email protected][a-z0-9.-]+.[a-z]{2,4}$’)]], name[null], }) }); get emailControl(): AbstractControl […]

ngx-responsive – Can’t bind to ‘responsive-window’ since it isn’t a known property of ‘div’

I am using the npm ngx-responsive. In my app.module I have imported the module (after the npm install) import { ResponsiveModule } from ‘ngx-responsive’ @NgModule({ imports: [ ResponsiveModule.forRoot() ], }) In my HTML I a have a sample code for rendering a <div [responsive-window]="’parent’"> <p *responsive="{ sizes:{ window: ‘parent’, min:100, max:600} }"></p> </div> I still […]

By Babulaas
Published
Categorized as angular, html, npm Tagged , ,

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq