I have a component to show a left box. This component changes a public flag "flagBlocoLateral" to identify if this box is visible or not.
import {Component, Input, OnInit} from '#angular/core';
#Component({
selector: 'app-bloco-lateral',
template: `
<div class="bloco-lateral" [ngClass]="{'bloco-lateral--aberto':flagBlocoLateral}">
<div class="bloco-lateral__conteudo" *ngIf="flagBlocoLateral">
<div class="row">
<div class="col-12">
<h4>Ajuda</h4>
</div>
<div class="col-12" [innerHTML]="textoInformativo">
</div>
</div>
</div>
<div class="bloco-lateral__menu">
<ul>
<li matTooltip="Ajuda" (click)="toggleBlocoLateral(!flagBlocoLateral)">
<fa-icon icon="info-circle"></fa-icon>
</li>
</ul>
</div>
</div>`
})
export class BlocoLateralComponent implements OnInit {
#Input()
textoInformativo: string;
flagBlocoLateral = false;
constructor() {
}
ngOnInit() {
}
toggleBlocoLateral(flag) {
this.flagBlocoLateral = flag;
}
}
In my typescript code I'm using my compontent and a public "flagBlocoLateral" property to call ngClass. If I call toggleBlocoLateral inside component, ngClass not working.
<app-bloco-lateral #blocoLateral></app-bloco-lateral>
<div class="bloco-central" [ngClass]="blocoLateral.flagBlocoLateral ? 'bloco-central--resize':''">
But if I try print the "flagBlocoLateral" property outside the component (using {{blocoLateral.flagBlocoLateral}}), the attribute ngClass works fine.
Any Ideas?
Thanks.
Try to negate the value directly inside the called method and not by handing in a parameter. This step is actually not necessary.
In your HTML-File:
<li matTooltip="Ajuda" (click)="toggleBlocoLateral()">
In your TS-File:
toggleBlocoLateral() {
this.flagBlocoLateral = !this.flagBlocoLateral;
}
Related
I have separate component of a tile in which i show all the list of data so when i click the tile it should show active class CSS in particular tile but now where ever i click it shows active class in all tiles.
div class="container-fluid" style="margin-top: 12px" *ngIf="!loading">
<div class="container-fluid " *ngIf="!done">
<adm-tile
[heading]='heading'
[orderno]='stock.id'
[time]='stock.created_at'
[category]='stock.request_category.name'
[status_type]='getStatus(stock.status)'
[name]='stock.requester.first_name'
[branch]='stock.to_department.name'
[date]='stock.delivery_date'
[priority]='stock.priority'
[index_no] = 'i'
[data]= 'stock'
[title]="'Requested To'"
[title1] = "'From'"
(selected)="onButton06($event)"
*ngFor="let stock of stock_list ; let i = index" ></adm-tile>
<div class="wrapper-card __list-card --small-card" style="margin-top:-5px" (click)="button01()" [class.active-border-selection]="index_no === selectedIndex1">
<div class="media">
<div class="media-body">
<div class="rowa split" style="position: relative">
<div class="col-6" style="position: relative">
<div >
<div style="height: 19px;overflow: hidden !important;">
<label class=" bold2">{{heading}}</label><span class="bold2">:#{{orderno}} </span>
<span class="bold2 desktop"> - {{your_date | timeAgo}}</span>
</div>
<div style="height: 22px">
<label class="bold3 ">{{category}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
button01() {
this.selectedIndex1 = this.index_no;
}
Based on your question for only one button or card to be active at one time, check below code. You need to set active in the parent component only not in child as all child are independent components.
Parent Component
import { Component } from '#angular/core';
#Component({
selector: 'payroll-search',
template: `
<div *ngFor="let stock of stock_list ; let i = index" >
<hr-files-search
style="position: relative; display:block"
(sendIndex)="getIndex($event)"
[class.active-border-selection]="i == selectedIndex"
[index_no] = 'i'
></hr-files-search>
</div>
`
})
export class PayrollSearchComponent {
stock_list = [1,2,3,4,4,5];
public selectedIndex: number;
public getIndex(event) {
this.selectedIndex = event;
}
}
Child component
import { Component, Input , OnInit, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'hr-files-search',
template: `
<div class="card" (click)="button01(index_no)">
<div class="card-content">
<h6>hello</h6>
</div>
</div>
`
})
export class HrFilesSearchComponent implements OnInit {
#Input() index_no: any;
#Output() sendIndex = new EventEmitter();
ngOnInit() {
}
selectedIndex1;
button01(index) {
this.sendIndex.emit(index);
}
}
Here is the stackblitz solution.
I am new to react, I have an issue on how to maintain stylesheets in react.
For Eg: If I have box structures in different components with the same class names which are import to Page-A & Page-B, I maintained different stylesheets & appended those to their respective pages. If I change the style properties for Page-B in respective stylesheet using the same class name, changes are reflecting in both the Page-A & Page-B pages, which is suppose to reflect in Page-B only. Please help to solve this.
Page-A<div class="wrapper">Headline<div>.wrapper{background:red; width:200px; height:200px;}
Page-B<div class="wrapper">Headline<div>.wrapper{background:black; width:400px; height:400px;}
import React, { Component } from 'react';
import NavbarafterLogin from './NavigationBar/navbarafterlogin';
import '../../Css/afterlogins.css';
class Home extends Component {
render() {
return (
<div class="col-sm-12 col-xs-12">
<NavbarafterLogin/>
<div class="body-wrapper">
<div class="container">
<ViewProfile/>
</div>
</div>
</div>
)
}
}
export default Home;
import React, { Component } from 'react'
import NavbarBeforeLogin from './NavigationBar/navbarbeforelogin';
import '../../Css/beforelogins.css';
class Index extends Component {
render() {
return (
<div class="col-sm-12 col-xs-12">
<NavbarBeforeLogin />
<div class="body-wrapper clearfix">
<div class="col-sm-12 col-xs-12">
<div class="banner-sec">
<div class="jumbotron">
<div class="container">
<h1>Submit <strong>Profile</strong></h1>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Index;
I create a web component like this:
class P3ELayout extends PolymerElement {
static get template() {
return html`
<slot name="app"></slot>;
}
}
tapButton(evt) {
console.log(evt);
}
}
In my index i create this component:
<body>
<p3e-layout>
<div slot="app" >
<app-header-layout fullbleed>
<app-header reveals>
<app-toolbar>
<div main-title>P3E</div>
<paper-icon-button icon="icons:account-circle" on-click="tapButton"></paper-icon-button>
</app-toolbar>
</app-header>
<div class="layout-container layout-horizontal">
<div class="layout-vertical layout-flex-auto layout-content">
content
</div>
</div>
</app-header-layout>
<app-drawer id="settingDrawer" align="right" swipe-open>
setting-drawer
</app-drawer>
</div>
</p3e-layout>
</body>
I expected to attach on the on-click event of the button but tapButton is never trigger. Can i attach on the component event inside the slot?
Here i have 2 .cshtml file that is Index And About page in Index page
app.components.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<h1>HelloHell {{name}}</h1>`
})
export class AppComponent {
name = 'Angular';}
Index.cshtml
<div class="row">
<div class="col-md-4">
<!-- Angular2 Code -->
<my-app>Loading.........</my-app>
</div>
</div>
Here its Working fine
But when i take another .ts file
import { Component } from '#angular/core';
#Component({
selector: 'my-Sajee',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Hello Sajeethrav'; }
About.cshtml
<div class="row">
<div class="col-md-4">
<!-- Angular2 Code -->
<my-Sajee>Loading...</my-Sajee>
<!-- Angular2 Code -->
</div>
</div>
Its Throughing An Error As EXCEPTION: Error in :0:0 caused by: The selector "my-app" did not match any elements
In this tutorial on Meteor and React an author uses react-router v2-3, I want to do it using new React- router v4. So I try to change this code, that used react-router v2:
import React from 'react';
import { IndexLink, Link, browserHistory } from 'react-router';
export class Navigation extends React.Component {
logout(e) {
e.preventDefault();
Meteor.logout(function() {
browserHistory.push('/login');
});
}
render() {
return (
<nav className="navbar navbar-default">
<div className="container-fluid">
...
<div className="collapse navbar-collapse" id="main-nav">
<ul className="nav navbar-nav">
<li><IndexLink to="/" activeClassName="active">Dashboard</IndexLink></li>
<li><a href="#" onClick={this.logout}>Logout</a></li>
</ul>
</div>
</div>
</nav>
)
}
}
to this one, that uses v4:
import React from 'react'
import { NavLink } from 'react-router-dom'
export class Navigation extends React.Component {
logout(e){
e.preventDefault()
Meteor.logout(function () {
this.context.history.push('/login')
})
}
render () {
return (
<nav className='navbar navbar-default'>
<div className='container-fluid'>
...
<div className="collapse navbar-collapse" id="main-nav">
<ul className="nav navbar-nav">
<li><NavLink to="/" activeClassName="active">Dashboard</NavLink></li>
<li><NavLink to="/logout" activeClassName="active"
onClick={this.logout.bind(this)}>Logout</NavLink></li>
</ul>
</div>
</div>
</nav>
)
}
}
but browser console.logs me an error:
Do you have /logout path in your app? I'm asking because you're probably handling that using logout method passed into onClick prop.
If you look how <Link> is working
https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router-dom/modules/Link.js
You can see if there is a prop called onClick component will call that function with event parameter and if event hasn't set defaultPrevented to true <Link> will try to go to /logout path