Just need the table tree by clicking on the row which needs to hide and show using angular 5. The following code will highlight the row. I have tried a lot of solutions. Please help me to hide the table tree and show child rows. The table tree structure is as follows :parent rows:1 ,2 ,3 ,4-this needs to display initially. Then by clicking on the parent 1 row it should display the child of 1.1,1.2.
import {
Directive,
Renderer2,
OnInit,
ElementRef,
HostListener,
HostBinding,
Input
} from '#angular/core';
#Directive({
selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit {
#HostBinding('style.backgroundColor') backgroundColor: string;
constructor(private elRef: ElementRef, private renderer: Renderer2) { }
ngOnInit() {
this.backgroundColor = this.defaultColor;
// this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
}
#HostListener('mouseenter') mouseover(eventData: Event) {
// this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
this.backgroundColor = 'blue';
}
#HostListener('mouseleave') mouseleave(eventData: Event) {
// this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'transparent');
this.backgroundColor = 'blue';
}
}
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let demo of demoData" appBetterHighlight>
<td>{{demo.one}}</td>
<td>{{demo.two}}</td>
<td>{{demo.three}}</td>
</tr>
<tr *ngFor="let demo of demoData" [style.display]="'none'" appBetterHighlight>
<td>{{demo.one}}</td>
<td>{{demo.two}}</td>
<td>{{demo.three}}</td>
</tr>
</tbody>
</table>
</div>
Related
I went through the documentation Vue Datatables Vue Datatable Component. I managed to implement the the datatable using typescript and vue js. Below is the Datatable component:
<template>
<DataTable
:data="data"
class="display" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
</DataTable>
<style scoped>
#import 'datatables.net-dt';
</style>
<script lang="ts">
import { defineComponent} from "vue";
import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
DataTable.use(DataTablesLib);
const data = [
['Pistone', 'Sanjama', 'pistone#ghii.org'],
['Timothy', 'Banda','timothy#ghii.org'],
['Blessings', 'Chidambe', 'blessings#ghii.org']
];
export default defineComponent({
name: "DataRequestDatatable",
components: {
DataTable,
},
data(){
return { data }
}
});
</script>
I have successfully display the table and add columns etc and they do not have a documentation of doing this. Does anyone have an Idea of how I can implement the child rows into this table using Vue and Typescript?
The image below shows the child rows in action:
I'm learning Angular and can not resolve how to add class names from CSS component
I'm writing a code demo that displays the weather condition of the city. If a city has cold temp, it will have blue color
I want to add class "express" to tags but I have tried ngClass and className from Angular but it is not working
This is my Angular code
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'traning';
public cities =[{
name: 'montreal ',temp: -30
},{
name: 'toronto ', temp: 19
},{
name:'vancouver ',temp: -4
}];
;
}
app.component.css
.express {
color: rgb(13, 142, 255);
}
app.component.html
<head>
<link href="./app.component.css" rel="stylesheet" >
</head>
<table>
<tr>
<th>City</th>
<th>temp</th>
</tr>
<tr *ngFor="let city of cities">
<td >{{city.name}}</td>
<td class="express" *ngIf="city.temp <0; then cold; else cool" >{{city.temp}}</td>
<ng-template #cold> cold</ng-template>
<ng-template #cool> cool</ng-template>
</tr>
</table>
Here is my Angular demo run
Demo of AngularJS
I want to add class "express" to <>td> tags but do not know how
Since you're using an *ngIf directive with an explicit then clause, the <td class="express"> element is ignored altogether in favor of the <ng-template #cold> element that is referenced from the then cold clause.
Take a look at this "Using an external then template" section of the NgIf Angular documentation. You'll notice, in the example it gives, the following line:
<div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
As is suggested, the entire element to which the *ngIf directive is applied, is ignored when using an external then template (this is what you're doing).
It seems that you'd like to render the <td class="express"> with dynamic content inside of it. That might look like the following:
<td class="express">
{{city.temp}}
<ng-container *ngIf="city.temp < 0; then cold; else cool"></ng-container>
<ng-template #cold> cold</ng-template>
<ng-template #cool> cool</ng-template>
</td>
Or using an implicit then template:
<td class="express">
{{city.temp}}
<div *ngIf="city.temp < 0; else cool"> cold</div>
<ng-template #cool> cool</ng-template>
</td>`
Alternatively, if all you need is dynamic text, I might suggest the following:
<td class="express">
{{city.temp}} {{city.temp < 0 ? "cold" : "cool"}}
</td>
The below clicked() function is triggering when a click is performed on the below label. It does not trigger when click is performed on glyphicon icon.
<div>
<span class="glyphicon glyphicon-heart" [class.highlight]="isActive" (click)="clicked()"></span>
</div>
<div><label >{{count}}</label></div>
This is the css File
.glyphicon{
color:#ccc;
cursor:pointer;
}
.highlight{
color:deeppink;
}
This is the ts file
import { Component, OnInit, Input,Output,EventEmitter } from '#angular/core';
#Component({
selector: 'likecounter',
templateUrl: './likecounter.component.html',
styleUrls: ['./likecounter.component.css']
})
export class LikecounterComponent implements OnInit {
#Input() count = 0
#Input() isActive = false
#Output() click = new EventEmitter()
constructor() { }
ngOnInit(): void {
}
clicked(){
this.click.emit()
}
}
You need to insert some content in span, so it may be visible in DOM.
<span class="glyphicon glyphicon-heart" [class.highlight]="isActive"
(click)="clicked()">Click Me</span>
This will solve your issue.
changing output event name form click to someothername worked.
I have a simple json. I need to show specific related span/vehicle_name on mouse hover of specific 'status' . Now when I hover on status(red or yellow) on my table column both vehicle_name is showing.Here I want to show only specific vehicle_name on mouse hover of specific status. Here is the code below
Demo : https://stackblitz.com/edit/angular-d8cwtw?file=src%2Fapp%2Fapp.component.ts
home.component.html
<div>
<table>
<tr *ngFor="let x of statusdata1;">
<td style="border:1px solid"><span>{{x.vehicle_number}}</span></td>
<td style="border:1px solid"><span (mouseover)="show()" (mouseout)="hide()">{{x.status}}</span><span *ngIf="showit">{{x.vehicle_name}}</span></td>
</tr>
</table>
</div>
home.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
imageSource :any;
statusdata1: any;
showit:boolean = false;
constructor() {}
ngOnInit() {
/* First data */
this.statusdata1 = [{"vehicle_number":1,"vehicle_name":"car","status":"yellow"},{"vehicle_number":2,"vehicle_name":"bus","status":"red"}];
console.log(this.statusdata1);
}
show(){
this.showit= true;
}
hide(){
this.showit= false;
}
}
Good day!
To be honest, I can suggest to you is just move this logic to separate dummy component, with such template:
<span (mouseover)="show()" (mouseout)="hide()">{{x.status}}</span>
<span *ngIf="showIt">{{x.vehicle_name}}</span>
So, in this case you showIt boolean will be bonded to particular component and you needn't do some extra logic.
If you don't wont to do it, I think you should have additional variable (index of table row on which mouseover event triggers) and inner your template you should have such condition:
<tr *ngFor="let x of statusdata1; index as idx">
<td style="border:1px solid"><span>{{x.vehicle_number}}</span></td>
<td style="border:1px solid">
<span (mouseover)="show(idx)" (mouseout)="hide(idx)">{{x.status}}</span>
<span *ngIf="showit && idx === currentIdx">{{x.vehicle_name}}</span>
</td>
</tr>
Also I can suggest to you the clearest and performant solution from my option - use data-content attribute, check it out: https://davidwalsh.name/css-content-attr
.html
<table>
<tr *ngFor="let x of statusdata1">
<td>
<span>{{ x.vehicle_number }}</span>
</td>
<td>
<span class="status" [attr.data-line]="x.vehicle_name">
{{ x.status }}
</span>
</td>
</tr>
</table>
.css
td {
border: 1px solid;
}
span[data-line]:hover:after {
content: attr(data-line);
}
Demo: https://stackblitz.com/edit/angular-qowzj3
I'm new to Angular 7, was trying to implment a feature but got stucked.
There are three divisions namely left, right and middle. middle div contains 2 more divisions inside it and those 2 divisions contains button inside them. I have applied col-md-6 class to middle division and whenever I click on left button inside middle div, I want the left division to be hidden and change the class of middle div from col-md-6 to col-md-9 and If both left and right div's are hidden I want the class of middle div to change from col-md-9 to col-md-12. I have tried using Renderer2, using addClass() and removeClass(). It's working with hostlistener, whenever I click on host element. But I want this functionality to work whenever I click on button. If there is any other method achieving this, then please suggest whether using Elementref or renderer2.
home-page.component.html
**left division**
<div class="col-md-3 sidebar" #leftBar style="background-color: #F8F4F4;">
</div>
** middle div**
<div class="md-center col-md-6" id="content" #content>
**left button**
<div class="btn toggle-sidebar-left" #t1 appSideBar>
<mat-icon> {{!leftBarHidden ? 'chevron_left' : 'chevron_right' }}
</maticon>
</div>
** right button **
<div class="btn toggle-sidebar-left" (click)="hide()" #t1>
<mat-icon>
{{!leftBarHidden ? 'chevron_left' : 'chevron_right' }}
</mat-icon>
</div>
</div>
**right div**
<div class="col-md-3 sidebar scrollbar" *ngIf="!rightBarHidden" id="sidebar-
right" style="background-color: #F8F4F4;">
</div>
home-page.component.ts
import { AfterViewInit, Component, OnInit, Input, Renderer2, ElementRef,
ViewChild, HostListener, ViewChildren } from '#angular/core';
import { Router } from '#angular/router';
import { SideBarDirective } from './appSideBar';
#Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit, AfterViewInit {
rightBarHidden = false;
leftBarHidden = false;
constructor(private router: Router, private render: Renderer2,
private el: Elemen Ref) { }
#ViewChild('leftBar') LeftBar:ElementRef; // leftbar is variable for
accessing left div.
#ViewChild('content') content:ElementRef; // content is variable for middle
div
#ViewChild('t1') t1:ElementRef; //t1 is variable for left button inside
middle div
#HostListener('click')
onclick() {
this.leftBarHidden = !this.leftBarHidden;
if (this.leftBarHidden)
{
const b = this.LeftBar.nativeElement;
this.render.removeStyle(b, 'display');
this.render.setStyle(b, 'display', 'none');
const b = this.LeftBar.nativeElement;
const c=this.render.parentNode(this.t1.nativeElement);
this.render.removeClass(c,'col-md-6');
this.render.addClass(c,'col-md-9');
this.render.removeClass(this.content.nativeElement, 'col-md-6');
this.render.addClass(this.content.nativeElement, 'col-md-9');
}
else {
this.render.removeStyle(b, 'display');
this.render.setStyle(b, 'display', 'block');
console.log(b);
}
}