I am using Angular.js, *ngFor for looping over the array and display the values. I want to preserve the spaces of an elements like array is,
string arr1 = [" Welcome Angular ", "Line1", "Line2", "
Done "]
I have used :
<div *ngFor="let arrValue of arr1">
{{arrValue}}
</div>
current output:
Welcome Angular
Line1
Line2
Done
Expected output:
Welcome Angular
Line1
Line2
Done
How to preserve the spaces of an elements like array without any modification.
Here, link for stackblitz where displaying by looping over. You can perform practical and Please let me know if you figure out way to preserve element with white spaces.
Thank you in advance.
https://stackblitz.com/edit/ngfor-examples?file=app%2Fapp.component.ts,app%2Fapp.component.css
Use the css style white-space: pre;
css
.preserve-whitespace {
white-space: pre;
}
ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
arr1 = [' Welcome Angular ', 'Line1', 'Line2', ' Done '];
name = 'Angular';
}
html
<div *ngFor="let arrValue of arr1" class="preserve-whitespace">
{{ arrValue }}
</div>
forked stackblitz
You could try this
<div *ngFor="let arrValue of arr1">
<pre>{{arrValue}}</pre>
</div>
Similar to all the answers above you can use CSS's white-space: pre-wrap; to accomplish this goal. You can either do it inline which would look like this:
yourComponent.html
<div style="white-space: pre-wrap;">
Or you could add a CSS attribute to the div you want like so:
styles.scss
.white-space {
white-space: pre-wrap;
}
yourComponent.html
<div class="white-space">
Try the following:
<div *ngFor="let arrValue of arr1">
<pre>
{{arrValue}}
</pre>
</div>
Related
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>
I am developing a kind of text boxes for comments.
When I click on the YES button I would like the box where the click came from, to have some kind of borders and a background color in order to signal that the click came from that box.
Can someone help me?
BLITZ
code
<div class="Submitcomments" *ngFor="let c of data; let i = index;">
<div>
<div class="row rowComments" style="margin-top: 11px;">
</div>
<div class="form-group">
<textarea #myinput type="text" class="form-control AreaText" rows="2"></textarea>
</div>
<div class="row" style="margin-top: -20px; margin-left: 5px;">
<button *ngIf="c.currentState=='pause'" class="btn reply" (click)="adjustState(i)">Yes</button>
<button *ngIf="c.currentState=='start'" class="btn reply1" (click)="adjustState(i)">No</button>
</div>
</div>
</div>
Try to use the [ngStyle] binding in your html.
Something like this:
<textarea #myinput type="text" class="form-control AreaText" rows="2"
[ngStyle]="{
'background-color': c.currentState=='start' ? '#daf4d5' : 'initial',
'border': c.currentState=='start' ? '1px solid green' : ''
}">
</textarea>
There are shorter ways to write the ngStyle but this one allows you to choose a style for box elements that aren't clicked too.
Also, you might want to move the ngStyle value in your component as a string, and use that instead (to make the html more readable).
You can use use AfterViewInit to wait until the component has loaded. Then just update each textarea styles everytime the child btn is clicked inside of each element .Submitcomments.
import { Component, ViewChild, ElementRef, AfterViewInit } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
let submitComments = document.querySelectorAll('.Submitcomments');
[].slice.call(submitComments).forEach((submitComment, index) => {
submitComment.querySelector('.btn').addEventListener('click', (event) => {
submitComment.querySelector('textarea').style.border = '1px solid red';
});
});
}
https://stackblitz.com/edit/angular-qe9hac?file=src/app/app.component.ts
NOTE: I'm not an angular 2 developer, so I'm sure there is a more "angular" type of way to do this. But this works for now.
try this also don't forget to upvote me if this is what you need becuse this takes time for me to do and i dont have time wasting to do this alot but if this isnt working at all you dont have to upvote me im just saying if it works remember to upvote me
window.onload = function() {
//onclick event
document.getElementById("yes").onclick = function fun() {
var element = document.getElementById("yes");
element.classList.add("yeep");
element.classList.remove("unk");
}
}
.yeep{
background-color:green ;
border-color:limegreen ;
border-width:5px;
color:white;
}
.unk{
background-color:darkgray;
border-color:gray;
border-width:5px;
color:white;
}
<button class='unk' id = 'yes'>yes!</button>
Here's the code:
list.component.html
<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
<label nz-radio nzValue="passed">Passed</label>
<label nz-radio nzValue="failed">Failed</label>
</nz-radio-group>
<div>
<textarea nz-input class="remarks-textarea" type="text" name="otherRemark" formControlName="remark" [(ngModel)]="otherRemark"
[nzAutosize]="{ minRows: 3, maxRows: 3 }"></textarea>
</div>
how to show the div which it has a textarea, it will show when in radio button select the failed and it will hide when it clicked the passed.
thanks in advance
Please find below image which has all formcontrol and (ngModelChange).
I think there is some issue with initialization. If you can elaborate more about your code that can help you to check further.
Thanks.
You may be try to add *ngIf condition on div
<div *ngIf="radioValue === 'failed'">
Use like bellow example:
HTML:
<form [formGroup]="radioForm">
<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
<label nz-radio nzValue="passed">Passed</label>
<label nz-radio nzValue="failed">Failed</label>
</nz-radio-group>
<div *ngIf="radioValue === 'failed'">
<textarea nz-input class="remarks-textarea" type="text" name="otherRemark" formControlName="remark" [(ngModel)]="otherRemark"
[nzAutosize]="{ minRows: 3, maxRows: 3 }"></textarea>
</div>
</form>
Component ts:
import { Component } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
radioForm = new FormGroup({
radiostatus: new FormControl(''),
remark: new FormControl('')
});
onChangeStatus($event){
console.log($event);
}
}
Also you could use like [hidden]="radioValue !== 'failed'" instead of *ngIf="radioValue === 'failed'"
WORKING DEMO
I wish to add a class name to NG2 directive in order to apply CSS rules on it. Given the following component:
#Component({
moduleId: module.id,
selector: 'search-form',
templateUrl: 'search-form.component.html',
styleUrls: [ 'search-form.component.css']
})
I tried this:
search-form {
width:100%;
display:block;
}
But it did not work.
How can I add a class to search-form ?
#Component({ // or #Directive({
// use `host:` or `#HostBinding()` (not both)
// host: {'[class.someclass]': 'true'}
})
class SearchFormComponent {
#HostBinding('class.someclass')
someClass = true;
}
Perhaps you mean adding styles to "self" by adding this CSS to search-form.component.css
:host {
width:100%;
display:block;
}
You declare CSS classes in your stylesheet .. search-form.component.css
If you want to target the component in your stylesheet then you could do ...
search-form {
width:100%;
display:block;
}
This will target elements with the tag search-form.
Because Angular2 is component based, it only targets elements inside the component. I am not sure if it will target the actual element itself but I think it will.
I can show an example of this.
Firstly create a stylesheet. like
<style>
.red
{
color:red;
}
.blue
{
color:blue;
}
</style>
Then in your HTML include your style sheet along with angular.min.js and create a dropdown as below.
<select ng-model="a">
<option value="red">red</option>
<option value="blue">blue</option>
</select>
Then create a H1 tag like below.
<h1 ng-class="a">Header color</h1>
Note. HTML has to be within the div of ng-app you create.
Hope this helps. All the best.
this is my html:
<div ng-if="!item.edit>
<div class='door-description' ng-bind-html="item.Description"></div>
<div class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration"></div>
</div>
<div ng-if="item.edit">
<textarea elastic class='door-description' ng-bind-html="item.Description" ng-model="item.Description"></textarea>
<textarea elastic class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration" ng-model="item.SoftValues"></textarea>
</div>
So the linebreak looks good when im in edit mode and do the edit to the textarea but when i save the text and retrieve it again it looses the linebreaks.
Here is what it looks like when editing:
And here is what it looks like when not editing:
I can still toggle between edit and not editing and i will get the same result.
What do i have to do to make the linebreaks appear when not editing?
Can you try using pre tag:
<pre class='door-description' ng-bind-html="item.Description"></pre>
Just apply this style to your element:
white-space: pre;
Can you please use like this ,
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<textarea elastic class='door-description' ng-bind-html="myText " ng-model="myText "></textarea>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <div><h1>John Doe</h1></div>";
});
</script>
may be this will work .
It will give object like ,
My name is: <div><h1>John Doe</h1></div>