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
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 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;
}
I tried to include css for children element included in a component via ng-content. It seems to be not implemented yet in Angular 2 or maybe someone has got a solution except to put css in a general stylesheet ?
app.component.ts
<comp-parent>
<comp-child></comp-child>
</comp-parent>
compParent.component.html
<div class="wrapper">
<ng-content></ng-content>
</div>
compParent.component.css
.wrapper > comp-child {
margin-right: 5px; <-- Not applied !!!
}
You can use /deep/ (deprecated) or >>> or ::ng-deep selector:
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
E.g.:
.wrapper ::ng-deep comp-child { ... }
Note that >>> seems to not work for projects based on angular-cli.
Apply classes to the html which is going to be rendered.
app.component.ts
<comp-parent>
<comp-child></comp-child>
</comp-parent>
#Component({
selector: 'comp-parent',
template: `
<div class="wrapper">
<ng-content></ng-content>
</div>
`
})
export class CompParent { }
#Component({
selector: 'comp-child',
template: `
<div class="comp-child">
<div>
</div>
</div> `,
})
export class CompChild {}
/// In styles.css
.wrapper .comp-child {
margin-left: 50px;
}
This worked for me in my project.
We can use interpolation to write an input into the template:
#Component({
selector: 'tag',
inputs: ['color'],
template: `
<div id="test" style="background: {{color}}">
Some text
</div>
`,
})
class TestComponent {
}
My question is: Is it possible to get it (somehow) to work like this:
#Component({
selector: 'tag',
inputs: ['color'],
template: `
<div id="test">
Some text
</div>
`,
styles: ['#test { background: {{color}}; }'],
})
class TestComponent {
}
This last attempt does not work, and I cannot seem to find a way how to do it.
Thanks.
AFAIK you can't do that. Component styles metadata wouldn't have access to its Class variable. I'd better suggest you to go for ngClass/ngStyle
<div id="test" [ngStyle]="{ 'background': color }">
Some text
</div>