We Keep Coding

Conditional order in Angular 8

I want to check the condition in Angular.
I want to look at two numbers that would enter Div if these two numbers were equal.
How can I check this condition?
I tried the following method and it was wrong.
<div *ngIf="'{{item1.menuID==item2.menuID}}'">
{{item1.title}}
</div>

The code you have there would evaluate to a string given you're adding single quotes around the condition, also you don't need to interpolate to access an object inside an ngIf.
If you want to evaluate if item1.menuID and item2.menuID are equal you would do
<div *ngIf="item1.menuID == item2.menuID">
{{item1.title}}
</div>

You don't require to use interpolation within [anyAttributeEnclosingSquareBrackets] or any angular attribute like *ngIf, *ngFor or some attributes like formControlName
For example:
<child-component [childAttribute]="parentComponentVariable">
<div *ngFor="let x of arrayVariable">Array Variable is present in component</div>
<input type="text" formControlName="name">
You can directly compare like below code:
<div *ngIf="item1.menuID==item2.menuID">
{{item1.title}}
</div>
Assuming that, item1 and item2 are not private variables of component and are available or initialise expectedly

How to show a component and a variable within the true case in a ternary in React/jsx?

I want to do a ternary inside of a div that renders a component I’ve built and a variable vs. a button, but my syntax is throwing an error. Does anyone know how I can alter this so that it does what I want?
<div>
{thing ? <WorkListBadge /> item.resource : <button> Click Me
</button> }
</div>
It’s erroring on the <WorkListBadge /> part with
Module build failed: SyntaxError: Unexpected token, expected :
I tried a bunch of different jsx variations with no luck. This is within a jsx file.
I'm new to React and could totally be going about this the wrong way as well. Thanks in advance!

You can only render a single entity in a ternary. Wrap both of your elements in a <div> to combine them into a single item. Remember to add curly braces for item.resource
<div>
{thing ? <div><WorkListBadge /> {item.resource}</div> : <button> Click Me
</button> }
</div>

Angular 4 - Scroll To item in list based on search input

I can do this with custom javascript but was wondering if there is anything built into Angular 4 that I might be able to make use of. I have a list of checkboxes that can be scrolled through and a search input above. I want to be able to jump to a section in the list as a user types in the search input. My HTML:
<!-- Sold To -->
<div class="col-md-12 input-container">
<div class="checkbox-group">
<input type="search" placeholder="Jump to Soldto...">
<div class="checkbox-wrap">
<mat-checkbox *ngFor="let option of soldToOptions">
{{ option }}
</mat-checkbox>
</div>
</div>
</div>
And a sample list of the array that I am looping through for the checkboxes (there will actually be about 300 entries in this array)...
soldToOptions = [
'1028341000-MITSUBISHI WONOKE MENTOR-DALLAS',
'1018551000-ADVANCE STARTER TEST-CINCINNATI',
'1030591000-AMERICAN JOYRIDE CARTHAGE-SAN FRANCISCO',
'1023221000-TESTING GENERAL OAKLAND-OAKLAND'
];
I will first need to order these alphabetically based on the the first part of the string after the initial '-'. Just wondering if there is anything built in to Angular 4 that would allow me to match the user's input string to the value from the array and jump to that section in the scrollable checkboxes. I strictly do not want to filter the list, just move the the proper place in the list. Any help is much appreciated.

ngx-page-scroll should be able to meet your needs. You would just need a way to dynamically add the markup to identify each element generated.

Polymer content issue for ie11

I am using polymer 1.
I have used something like this in polymer and I am passing the section's content from the point where i use this component.
It's working fine for chrome and firefox.
But for IE-11, I am not getting anything for the content.
<section id="asdf" class="className">
<content select="section"></content>
</section>
Does someone know the about this issue ?

Try setting the select attribute value to contain a period. The select attribute needs a selector not a string.
<template>
<header>Local dom header followed by distributed dom.</header>
<content select=".content"></content>
<footer>Footer after distributed dom.</footer>
</template>
Polymer docs

Angular not parse the template {{value}} in style attribute in IE9 and 10

I display a list of bars in a NgRepeat and I use the value frecuency to display the width of bars in percentage. From what i see IE 9-10 doesn't like this part: style="width:{{type.frecuency}}%;"
<div class="drp" ng-repeat="type in weeks">
<div style="width:{{type.frecuency}}%;" class="percentBar">
<span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
</div>
</div>
Is this an issue with Angular on IE or my code is the problem.
Thanks
P.S.
I know that i could make a class but modifying the style attribute is faster.
Solution: ng-style="setBarWidth(type.frecuency);"
scope.setBarWidth = function(width) {
return {width: width+'%'};
};

When using derived values for various HTML attributes, it's always a good idea to use the provided Angular directives to do it. They make sure that the browser sees the values you want it to see and not the binding syntax (in your case {{type.frecuency}})
Here, the ngStyle directive should be used.
<div class="drp" ng-repeat="type in weeks">
<div ng-style="width:{{type.frecuency}}%;" class="percentBar">
<span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
</div>
</div>
There are similar directives for many other HTML attributes, see the documentation for the full list.