I have tried to bind to an event coming from SVG object inside Angular 6.0 template, and found that none of the events which are standard for most of the HTML Elements are not working for binding o,angular,angular-template"/>

时间戳

首页 > 解决方案 > 事件绑定不起作用 in Angular 2 and above

I have tried to bind to an event coming from SVG object inside Angular 6.0 template, and found that none of the events which are standard for most of the HTML Elements are not working for binding o

angular - 事件绑定不起作用 in Angular 2 and above

I have tried to bind to an event coming from SVG object inside Angular 6.0 template, and found that none of the events which are standard for most of the HTML Elements are not working for binding o

问题描述

I have tried to bind to an event coming from SVG object inside Angular 6.0 template, and found that none of the events which are standard for most of the HTML Elements are not working for binding on "< object >" tag with SVG inside (if this is relevant).

@Component(
    {
        selector: 'loading-component',
        template: `
            SVG TEST
            <object data="mysvg.svg" type="image/svg+xml" (click)="svgClickHandler($event)"></object>`

    })
export class LoadingComponent
{
    constructor()
    {
        console.log('LoadingComponent.constructor()', '');
    }

    public svgClickHandler(e: MouseEvent): void
    {
        console.log('LoadingComponent.svgClickHandler()', e);

    }
}

Why Angular does not make binding to events coming from ?

Overwrite PrimeNG step component styling

I am using 

<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>

in my Angular component. In my component's stylesheet, I am trying to style the p-steps with no luck. When I change the style directly in the browser's developer tools, it works. I even tried to overwrite the style with Angular's 

:host ::ng-deep

But it did not work. I want the steps to be aligned vertically, I dont want the border and I want the step numbers to be light grey and the selected step number to be light grey. What I want is the follwing:

:host ::ng-deep .ui-widget, .ui-widget * {
  float: none !important;
}

:host ::ng-deep .ui-steps {
  border: none !important;
}

:host ::ng-deep .ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
  background-color: #757575 !important;
}

:host ::ng-deep body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
   background-color: #bdbdbd !important;
}

I have also set

encapsulation: ViewEncapsulation.None

in my component.

标签： angularangular-template

解决方案

推荐阅读