Mixing
how to add style to a string returned from a function called from the html file
I have the following code :
<mat-form-field>
<mat-label>Element Parent:</mat-label>
<input type="text" matInput
(input)="getHierarchyService.filterFlatHierarchy($event)"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
[displayWith]="displayLabel">
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
{{returnSemiStringPath(option.Path)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
the function returnSemiStringPath returns a shortened string from the input :
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `${newPathArray[0]}/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/${newPathArray[newPathArray.length-2]}`
}
I want to add a style to the first part and last part of the new string (add color).
I thought to just "create" html elements from my ts file and append them from this function, with the styling I want. but I have no idea how to achieve this in angular.
*I know this function as it is probably a bad practice, I will turn it into an angular pipe to be more efficient after it works.
Thank you all for your help!
javascript html
angular asked Jan 1 at 17:20
tal farantal faran
105
add a comment |
I have the following code :
<mat-form-field>
<mat-label>Element Parent:</mat-label>
<input type="text" matInput
(input)="getHierarchyService.filterFlatHierarchy($event)"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
[displayWith]="displayLabel">
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
{{returnSemiStringPath(option.Path)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
the function returnSemiStringPath returns a shortened string from the input :
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `${newPathArray[0]}/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/${newPathArray[newPathArray.length-2]}`
}
I want to add a style to the first part and last part of the new string (add color).
I thought to just "create" html elements from my ts file and append them from this function, with the styling I want. but I have no idea how to achieve this in angular.
*I know this function as it is probably a bad practice, I will turn it into an angular pipe to be more efficient after it works.
Thank you all for your help!
javascript html
angular asked Jan 1 at 17:20
tal farantal faran
105
add a comment |
I have the following code :
<mat-form-field>
<mat-label>Element Parent:</mat-label>
<input type="text" matInput
(input)="getHierarchyService.filterFlatHierarchy($event)"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
[displayWith]="displayLabel">
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
{{returnSemiStringPath(option.Path)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
the function returnSemiStringPath returns a shortened string from the input :
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `${newPathArray[0]}/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/${newPathArray[newPathArray.length-2]}`
}
I want to add a style to the first part and last part of the new string (add color).
I thought to just "create" html elements from my ts file and append them from this function, with the styling I want. but I have no idea how to achieve this in angular.
*I know this function as it is probably a bad practice, I will turn it into an angular pipe to be more efficient after it works.
Thank you all for your help!
javascript html
angular asked Jan 1 at 17:20
tal farantal faran
105
I have the following code :
<mat-form-field>
<mat-label>Element Parent:</mat-label>
<input type="text" matInput
(input)="getHierarchyService.filterFlatHierarchy($event)"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
[displayWith]="displayLabel">
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
{{returnSemiStringPath(option.Path)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
the function returnSemiStringPath returns a shortened string from the input :
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `${newPathArray[0]}/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/${newPathArray[newPathArray.length-2]}`
}
I want to add a style to the first part and last part of the new string (add color).
I thought to just "create" html elements from my ts file and append them from this function, with the styling I want. but I have no idea how to achieve this in angular.
*I know this function as it is probably a bad practice, I will turn it into an angular pipe to be more efficient after it works.
Thank you all for your help!
javascript html
angular javascript html
angular asked Jan 1 at 17:20
tal farantal faran
105
asked Jan 1 at 17:20
tal farantal faran
105
asked Jan 1 at 17:20
tal farantal faran
105
asked Jan 1 at 17:20
tal farantal faran
105
asked Jan 1 at 17:20
tal farantal faran
105
105
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Based on my understanding, you want to add color first and last part of the returned string.
User Angular HTML binding, like this..
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
<span [innerHTML]="returnSemiStringPath(option.Path)"></span>
</mat-option>
The returnSemStringPath function would get modified like this
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `<span class='redcolor'>${newPathArray[0]}</span>/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/<span class='bluecolor'>${newPathArray[newPathArray.length-2]}</span>`}
And the component decorator would look like this..
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['.redcolor { color: red; }', '.bluecolor{color:blue;}'],
encapsulation: ViewEncapsulation.None,
})
Thanx.
answered Jan 1 at 20:32
ObaidObaid
28928
add a comment |
I think that this code can help you:
.ts
returnSemiStringPath(path: string) {
const newPathArray = path.split('/');
return newPathArray;
}
.html
<div class="hero">
<div *ngFor="let hero of returnSemiStringPath('https://stackoverflow.com/questions/53997450/how-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file')">
<span>{{hero}}</span>
</div>
</div>
if you want you can change the div block in *ngFor to span and remove span where is hero.
.css
.hero div:first-child {
color: red;
}
.hero div:last-child{
color: red;
}
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997450%2fhow-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Based on my understanding, you want to add color first and last part of the returned string.
User Angular HTML binding, like this..
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
<span [innerHTML]="returnSemiStringPath(option.Path)"></span>
</mat-option>
The returnSemStringPath function would get modified like this
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `<span class='redcolor'>${newPathArray[0]}</span>/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/<span class='bluecolor'>${newPathArray[newPathArray.length-2]}</span>`}
And the component decorator would look like this..
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['.redcolor { color: red; }', '.bluecolor{color:blue;}'],
encapsulation: ViewEncapsulation.None,
})
Thanx.
answered Jan 1 at 20:32
ObaidObaid
28928
add a comment |
Based on my understanding, you want to add color first and last part of the returned string.
User Angular HTML binding, like this..
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
<span [innerHTML]="returnSemiStringPath(option.Path)"></span>
</mat-option>
The returnSemStringPath function would get modified like this
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `<span class='redcolor'>${newPathArray[0]}</span>/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/<span class='bluecolor'>${newPathArray[newPathArray.length-2]}</span>`}
And the component decorator would look like this..
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['.redcolor { color: red; }', '.bluecolor{color:blue;}'],
encapsulation: ViewEncapsulation.None,
})
Thanx.
answered Jan 1 at 20:32
ObaidObaid
28928
add a comment |
Based on my understanding, you want to add color first and last part of the returned string.
User Angular HTML binding, like this..
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
<span [innerHTML]="returnSemiStringPath(option.Path)"></span>
</mat-option>
The returnSemStringPath function would get modified like this
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `<span class='redcolor'>${newPathArray[0]}</span>/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/<span class='bluecolor'>${newPathArray[newPathArray.length-2]}</span>`}
And the component decorator would look like this..
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['.redcolor { color: red; }', '.bluecolor{color:blue;}'],
encapsulation: ViewEncapsulation.None,
})
Thanx.
answered Jan 1 at 20:32
ObaidObaid
28928
Based on my understanding, you want to add color first and last part of the returned string.
User Angular HTML binding, like this..
<mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
*ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
[value]="option">
<span [innerHTML]="returnSemiStringPath(option.Path)"></span>
</mat-option>
The returnSemStringPath function would get modified like this
returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `<span class='redcolor'>${newPathArray[0]}</span>/${newPathArray[1]}.....
${newPathArray[newPathArray.length-1]}/<span class='bluecolor'>${newPathArray[newPathArray.length-2]}</span>`}
And the component decorator would look like this..
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['.redcolor { color: red; }', '.bluecolor{color:blue;}'],
encapsulation: ViewEncapsulation.None,
})
Thanx.
answered Jan 1 at 20:32
ObaidObaid
28928
answered Jan 1 at 20:32
ObaidObaid
28928
answered Jan 1 at 20:32
ObaidObaid
28928
answered Jan 1 at 20:32
ObaidObaid
28928
28928
add a comment |
add a comment |
I think that this code can help you:
.ts
returnSemiStringPath(path: string) {
const newPathArray = path.split('/');
return newPathArray;
}
.html
<div class="hero">
<div *ngFor="let hero of returnSemiStringPath('https://stackoverflow.com/questions/53997450/how-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file')">
<span>{{hero}}</span>
</div>
</div>
if you want you can change the div block in *ngFor to span and remove span where is hero.
.css
.hero div:first-child {
color: red;
}
.hero div:last-child{
color: red;
}
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
add a comment |
I think that this code can help you:
.ts
returnSemiStringPath(path: string) {
const newPathArray = path.split('/');
return newPathArray;
}
.html
<div class="hero">
<div *ngFor="let hero of returnSemiStringPath('https://stackoverflow.com/questions/53997450/how-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file')">
<span>{{hero}}</span>
</div>
</div>
if you want you can change the div block in *ngFor to span and remove span where is hero.
.css
.hero div:first-child {
color: red;
}
.hero div:last-child{
color: red;
}
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
add a comment |
I think that this code can help you:
.ts
returnSemiStringPath(path: string) {
const newPathArray = path.split('/');
return newPathArray;
}
.html
<div class="hero">
<div *ngFor="let hero of returnSemiStringPath('https://stackoverflow.com/questions/53997450/how-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file')">
<span>{{hero}}</span>
</div>
</div>
if you want you can change the div block in *ngFor to span and remove span where is hero.
.css
.hero div:first-child {
color: red;
}
.hero div:last-child{
color: red;
}
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
I think that this code can help you:
.ts
returnSemiStringPath(path: string) {
const newPathArray = path.split('/');
return newPathArray;
}
.html
<div class="hero">
<div *ngFor="let hero of returnSemiStringPath('https://stackoverflow.com/questions/53997450/how-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file')">
<span>{{hero}}</span>
</div>
</div>
if you want you can change the div block in *ngFor to span and remove span where is hero.
.css
.hero div:first-child {
color: red;
}
.hero div:last-child{
color: red;
}
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
answered Jan 1 at 20:16
Chester mi niñoChester mi niño
3115
3115
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997450%2fhow-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
