How to change the color of the div based on a value

Issue Here are the scripts and style that I used: <script src=”angular.min.js”></script> <style> .greater { color:#D7E3BF; background-color:#D7E3BF; } .less { color:#E5B9B5; background-color:#E5B9B5; } </style> <script> var app = angular.module(‘MyTutorialApp’, []); app.controller(“controller”, function ($scope) { $scope.chargeability = [{ date: ’15-Sep-13′, max:

Continue reading

ng-class is not applied

Issue I am trying to validate a form using AngularJS. This is my form: <form ng-controller=”LoginCtrl” role=”form” class=”form-horizontal”> <div class=”form-group”> <label for=”email” class=”col-sm-2 control-label”>Email</label> <div class=”col-sm-10″> <input required type=”email” name=”email” ng-model=”email” class=”form-control” ng-class=”{ error: email.$invalid }” id=”email”> </div> </div> </form>

Continue reading

Angular apply class in directive

Issue I have a angular directive which will produce bootstrap form-group, looks for $scope.errors for value of ng-model of the directive to show errors.. Example below: My html code: <input type=”text” b-input ng-model=”data.company.name” label=”Company Name” class=”form-control”/> and my directive code:

Continue reading

Inject scope in ng-class

Issue my problem is simple: i’m doing this: <div class=”text-center tag row class_{{infoticket.tags[0]}}”>{{infoticket.tags[0]}}</div> <div ng-repeat=”item in ticketcontent track by $index”> <div style=”display: block” class=”container row col-md-offset-1 col-md-8″ ng-class=”{true: ‘agent’, false: ‘collab_infoticket.tags[0]’} [item.author_id == 591119252 || item.author_id == 619780882 || item.author_id

Continue reading

Angular dirrectives and ng-class

Issue Suppose a directive with html e.g. in component.html like <div class=”text-field” ng-class=”{‘classA’: varA}”> …. </div> then I’m trying to do… <component ng-class=”{‘classB’: varB}”></component> After that in ng-class I’m having something like {‘classB’: varB} {‘classA’: varA} that is obviously not

Continue reading

How to change other element classes by clicking on an element inside ng-repeat

Issue I have an ng-repeat code in angularjs like this: <th ng-repeat=”row in results.rows track by $index”> {{row.name | translate}} <a class=”sort” ng-click=”orderResultDataEvent($index)” ng-if=”results.tableOptions.sortable”> <i ng-class=”{‘icon icon-exc-column-hover-sort’: row.isReverseOrder == null,’icon icon-exc-sort-numeric-1-9′: row.isReverseOrder === false , ‘icon icon-exc-sort-numeric-9-1’: row.isReverseOrder === true

Continue reading

Angular material multiselect check box current value not able to get

Issue when i check the checkbox i am getting undefined when i uncheck getting the value of what i previously checked. how to fix this issue? <div *ngSwitchCase="’multiselect’" [ngClass]="{‘mandate’: field.required}" > <mat-form-field appearance="outline" > <mat-label>{{field.placeHolder}}</mat-label> <mat-select [formControlName]="field.controlName" multiple [(ngModel)]="countrySelected" >

Continue reading

Why mat-spinner not showing?

Issue Index.html file is: <body> <mat-spinner></mat-spinner> </body> App.module file is: @NgModule({ imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatProgressSpinnerModule, BrowserAnimationsModule ] }) I see on the page tag <mat-spinner></mat-spinner> but it does not work, no any errors in console Solution Angular components

Continue reading

Angular 5 ng-content issue

Issue I have weird issue when I implement ng-content between two component in Angular 5. This my first component is FooterComponent <div class=”footer”> <ng-content select=”footer”></ng-content> </div> And footer.component.ts import { Component, OnInit } from ‘@angular/core’; @Component({ selector: ‘app-footer’, templateUrl: ‘./footer.component.html’,

Continue reading

ng-content select not working "<element> is not a known element"

Issue I am following this tutorial like so: <div class=”app-autocomplete”> <mat-form-field> <mat-form-field> <div class=”app-autocomplete-input”> <ng-content select=”app-autocomplete-input”></ng-content> </div> </mat-form-field> <button mat-icon-button type=”button” [disabled]=”disabled”> <mat-icon>clear</mat-icon> </button> </mat-form-field> <!– … –> </div> But I am getting Uncaught Error: Template parse errors: ‘app-autocomplete-input’ is

Continue reading

Angular 9 ng-content dynamic update

Issue how i can update ng-content by updating selector on content elements? I have code in app.component.html: <my-slider> <img src="../../assets/logo1.png" /> <img src="../../assets/logo2.png" /> </my-slider> Here’s the code my-slider.component.ts: @Component({ selector: ‘my-slider’, template: ‘<ng-content select=".render" ></ng-content> <button (click)="render()"> Show</button>’, styleUrls:

Continue reading

How to create reusable component with custom buttons configuration

Issue So currently I have component which have multiple buttons configurable with options: test.component.html <button *ngIf="cleaning" (click)="onCleaning()" > {{‘btn.cleaning’|translate}} </button> <button *ngIf="remove" (click)="onRemoving()" > {{‘btn.remove’|translate}} </button> test.component.ts @Input() cleaning: boolean; @Input() remove: boolean; cleaningForm: FormGroup; parent.component.html <test [cleaning]="true" [remove]="false"></test> And

Continue reading

How to create reusable component with custom buttons configuration

Issue So currently I have component which have multiple buttons configurable with options: test.component.html <button *ngIf="cleaning" (click)="onCleaning()" > {{‘btn.cleaning’|translate}} </button> <button *ngIf="remove" (click)="onRemoving()" > {{‘btn.remove’|translate}} </button> test.component.ts @Input() cleaning: boolean; @Input() remove: boolean; cleaningForm: FormGroup; parent.component.html <test [cleaning]="true" [remove]="false"></test> And

Continue reading

Is there any way to do something, in order to ContentChildren could find components that are inside parent's <ng-content></ng-content>?

Issue I have some components from third-party library, that work fine, when use next way: <lib> <lib-inner [text]="’111’"></lib-inner> <lib-inner [text]="’222’"></lib-inner> </lib> Simplified imitation of ‘lib’ and ‘lib-inner’ components code: @Component({ selector: "lib", template: ` <ng-container *ngFor="let c of allInner;"> <button>{{

Continue reading

Using ng-content with *ngtemplateOutlet not show in DOM

Issue I have three Angular component, one base component and two child component (child1 and child2), with these structure: child1.component.html <ng-template #child1Template> <div> <h1>CHILD 1</h1> </div> </ng-template> child2.component.html <ng-template #child2Template> <div> <h1>CHILD 2</h1> </div> </ng-template> base.component.html <app-child1 #wrapper_child1 class="hidden"></app-child1> <app-child2

Continue reading

Conditional duplicate templateref in ng-content with selector

Issue I have a component which toggles the component’s template based on client device size. Component code is: import {Component} from ‘@angular/core’; import {BreakpointObserver, Breakpoints} from ‘@angular/cdk/layout’; @Component({ selector: ‘ui-switcher’, template: ` <ng-content *ngIf="isSmall" select="mobile"></ng-content> <ng-content *ngIf="!isSmall" select="web"></ng-content> ` })

Continue reading

Call parent component method from child in slot

Issue Is it possible to call the parent method from a child in a slot? For example: parent.component.ts methodFromParentComponent() { console.log(‘fires…’) } And then something like this: <parent-component> <child-component (click)="methodFromParentComponent"></child-component> </parent-component> Ofcourse that won’t work. I tried experimenting with ngTemplateOutlet:

Continue reading

How to set default value in ngx-dropdown-list

Issue What i want is on refresh the page i want to get the value from API and add as selected in the select list. Here the syntax <ngx-dropdown-list (selectionChange)="onChange($event)" [items]="optionItems" [multiSelection]="false" [placeHolder]="’place holder of the drop-down list’" [(selectedValue)]="maxRowsLimitation" [suffixText]="’

Continue reading

Why are my Thymeleaf Path variables breaking my HTML?

Issue I have two similar controller methods that I’m using to test the @PathVariable annotation with: @RequestMapping( value = "/1", method = {RequestMethod.GET}) public String two(Model model) { model.addAttribute("category", "acategory"); model.addAttribute("subCategory", "placeholder"); return "homePage"; } @RequestMapping( path = "/{category}/{subcategory}", method

Continue reading