We Keep Coding

How to show button based on the status id in axios get?

I want to display button based on status id. If status id is 2 the ADD will be showed up to the user.
I'm using axios get function.
below is my code
$("#detailsContent").html(response.data.result.map((a) => {
let statusData= '';
if(a.status.id === '2'){
statusData+=`<button class="btn btn-danger" onclick="add()">ADD</button>`;
}
return`
<div class="nk-block">
<div class="info">
<ul class="meta">
<li class="id"><span> Type:</span> <strong>${a.status.type}</strong></li>
<li class="date"><span>Submitted:</span> <strong>${a.status.date}</strong></li>
</ul>
<div class="info">
<span class="badge badge-primary">${a.status.name}</span>
</div>
<div class="status">
${statusData}
</div>
</div>
</div>
`;
}
if the status.id == 2
I want it to show the button ADD add the highlighted area
button area
With the my current code its not working even if the status id is 2 the button ADD still now showed up. How do I fix my code in order to display the button ?

I make silly mistake for this it should be like this if(a.status.id === 2)
and not like this if(a.status.id === '2')

How can I display additional data when clicking on list item?

I managed to display some mock data (name, email and username) but as you can see I wanted to display more detailed information (city,country,...) on a User by clicking on a row
I am still new to angular and still have problems using the correct syntax.
I am stuck searching the web for hours although I know it should be quite easy...
I thank you all in advance
This is what I have so far :
(this is my first question on stack overflow, I am sorry for mistakes :P )
export class ScrollComponent {
users;
constructor() {
this.users = Array(100)
.fill(1)
.map(_ => {
return {
name: faker.name.findName(),
email: faker.internet.email(),
exMail: faker.internet.exampleEmail(),
userName: faker.internet.userName(),
url: faker.internet.url(),
ip: faker.internet.ip(),
mac: faker.internet.mac(),
pass: faker.internet.password(),
address: faker.address.streetAddress(),
zip: faker.address.zipCode(),
city: faker.address.city(),
country: faker.address.county(),
iban: faker.finance.iban(),
bic: faker.finance.bic(),
bitcoin: faker.finance.bitcoinAddress()
};
});
<cdk-virtual-scroll-viewport itemSize="100">
<li *cdkVirtualFor="let u of users" class="animated slideInUp">
<h2>{{ u.name }} </h2>
<p> {{ u.email }} {{ u.userName }} </p>
</li>
</cdk-virtual-scroll-viewport>

Welcome to SO!
First of all keep in mind, that when using libraries like Angular Material or ng-bootstrap you have components that can already do this. As you are using the CDK, you probably use Angular Material as well? Then you could use the Expansion Panel.
Otherwise as you expected you can achieve this quite easily. There are different ways to do this, depending on your specific needs (i.e. should every list-element be expandable at the same time or only one?). I will give you a hint for what I think is the easiest way and then you can adjust it to your needs.
First thing is to add a boolean to your user-type holding the state of each list-element. Let's call it detailsVisible.
Then you want to add a ClickHandler to the list items which toggles this boolean:
<li *cdkVirtualFor="let u of users" class="animated slideInUp" (click)="u.detailsVisible = !u.detailsVisible">
and then add the the details into some element whichs visibility you control using *ngIf:
<li *cdkVirtualFor="let u of users" class="animated slideInUp" (click)="u.detailsVisible = !u.detailsVisible">
<h2>{{ u.name }} </h2>
<p> {{ u.email }} {{ u.userName }} </p>
<div *ngIf="u.detailsVisible"> additional details in here </div>
</li>
If you only want one element to be allowed to be expanded at the same time you would go for something like this. The idea is to just store the index of the selected element and only show details for this.
<li *cdkVirtualFor="let u of users; let i = index" class="animated slideInUp" (click)="expandedElement = i">
<h2>{{ u.name }} </h2>
<p> {{ u.email }} {{ u.userName }} </p>
<div *ngIf="users.indexOf(u) === expandedElement"> additional details in here </div>
</li>
and then of course add the expandedElement variable to your .ts-file.

How to show only one ul at a time in angular using ngFor

I have the above image which has Add Person button, on click of Add person, Person 1 row gets created and so on. On the right end of each row, I have a share icon, on click of an icon, I wanted to open a ul element. The problem is the number of popups that gets displayed depends on the number of rows. If 5 rows are added, then 5 popups are displayed. Ideally, I need only one popup to be displayed, for Person 4 row it should be the popup with 33( basically the popup the is present for that particular row). I tried to add *ngIf = i> 1 condition, but the popup with 00 is only displayed every time which is not correct because the popup position will always be in parallel to Person 1 position.
<div>
<div *ngFor="let person of persons; let i = index">
<div>
<div class="userIcon">
<div>
<img class="person-img" src="assets/images/person.png" alt="My Profile">
</div>
<div>
<input id="form3" class="form-control" type="text">
<label for="form3" class="">{{person.name}}</label>
</div>
</div>
</div>
<div>
<div>
<input id="form5" class="form-control" #enteramount type="text">
<a class='dropdown-trigger sharebtn' href='#' data-target='dropdown{{i}}' (click)="shareIconClicked($event, i, enteramount)"></a>
{{i}}
<ul id='dropdown{{i}}' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
<li> {{i}}
Copy Message
</li>
<li>Whatsapp</li>
<li>Email</li>
</ul>
</div>
</div>
</div>
</div>
Below image represents the single popup after adding ngIf = 'isFirst'. I have clicked the Person 4 share icon. If I click the Person 3 share or Person 5 share icon, the popup is always positioned on the first row.

Just add check for first using *ngFor like this -
<div *ngFor="let person of persons; first as isFirst">
....
<ul id='dropdown{{i}}' *ngIf='first' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
...</ul>
</div>
For more in details refer official docs -
https://angular.io/api/common/NgForOf

You should try angular Mat-menu feature like this.
<div *ngFor="let person of persons; first as isFirst">
.... code
<button mat-button [matMenuTriggerFor]="menu">Share</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="sharteWithFacebook(person)">Facebook</button>
<button mat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button>
</mat-menu>
</div>

clear the textbox alphabet value after I select the search results

I have a search engine code in angular2.
when I select the search results I need to display the values in the text box with cross button next to it.
right now I am getting the results.
but when I type alphabet h in the text box, I see some results but when I select hover, the h alphabet not dissapperaing.
to make it disappear I made the text box value as empty but still not working.
providing my code and stack blitz below
can you please help me.
so that in future I can implement myself.
https://stackblitz.com/edit/angular6-fdwnew?file=app/app.component.ts
add(item){
console.log("item--->", item);
this.tags.push(item);
this.value=''
}
delete(item) {
console.log(item);
this.tags = this.tags.filter(x => x !== item)
//this.tags.push(item);
}

You can change the HTML with ngModel which is two way binding in Angular and I feel you better maintain the independent boxes for the Input entry and list of tags
<div contenteditable="true"
class="border"
#textbox
style="border: 2px solid black; min-height:50px; width:300px;"
id="txtDiv"
(keypress)="updateKeyUp($event)"
>
<!---searchTerm$.next($event.target.value)-->
<div>
<span
class="box-tag"
*ngFor="let tag of tags">
{{tag.name}}
<b class="close" (click)="delete(tag)">x</b>
</span>
</div>
</div>
<input [(ngModel)]="nameModel" (keypress)="updateKeyUp($event)" placeholder="Enter Tag Name">{{this.nameModel}}
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9" (click)="add(result)">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
</li>
</ul>
Demo Here

Angular 2 *ngIf for 'this'

In Angular 2 I have this component.html:
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text" *ngIf="iscalled" />
<div id="container">
<button class="btn btn-warning editsection (click)="editAction()">Edit</button>
</div>
</li>
with this component.ts:
editAction(){ this.iscalled = true; }
iscalled is, by default, set to false in my component.
Basically, for each something of somethings I produce, along with my list is an input field that is assigned to it, and a button that runs editAction(). The button is only there if the user clicks on the editAction() button.
Now, as is, clicking on the editAction() button will enable all input fields in my list. I would like to restrict this to the exact li element that it is meant for.
I don't know if Angular 2 has a specific action for this, or if this is a plain javascript solution.

NOTE: with this setup don't set default value of iscalled to false
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text"
*ngIf="something.iscalled" /> //<<<===changed
<div id="container">
<button class="btn btn-warning
editsection
(click)="editAction(something)"> //<<<===changed
Edit
</button>
</div>
</li>
editAction(something){ something.iscalled = true; }
if you want to toggle it then you can do following,
editAction(something){ something.iscalled != something.iscalled; }