So the thing is: The html template of an angular component doesn't seem to be aware of the variable i set. Basically even if I set a variable in .ts class and then try to display it in a component, the view behaves as if there was no variable.
I've also tried creating a variable inside a tag but it just wouldn't work
TS
The ts part of a component
export class <%component_name%> {
bar = "test";
constructor(){...}
}
HTML
The html part of a component
<div>
<div>{{bar}}</div>
</div>
The result is:
Just in case: if I type a text inside the div without trying to display a variable, it works
HTML
Result
Oh, just in case: logging the hello variable in constructor function does display it in console: click
besides, if I add an *ngIf referencing some boolean from the TS file like that:
TS
export class <%component_name%> {
foo = true;
bar = "test";
constructor(){...}
}
HTML
<div *ngIf="foo">
<button>{{bar}}</button>
</div>
..then nothing at all is displayed.
At the end it's supposed to be a button with an icon and text on it, but i only get an icon on the button (Which is referenced inside the .html file)
If you have any idea of what might be going on, pls tell
Related
I am not even sure if what I am trying to do is possible. I want to present the "floating" DOM element created when dragging a row as something more than just text. Seems like when I try to use html code as the returned value it is rendered as text rather than html:
rowDragText: function(params) {
return `<div [innerHTML]=${params.rowNode.data.RULE_NAME}></div>`;
}
This is what happens:
There is public static GHOST_TEMPLATE defined in dragAndDropService.ts.
You can try modifiying that template and perhaps also inspect the createGhost function nearby.
rowDragText probably not used with this method...
Render the HTML of a component so that it could be used to open a new tab of the type about:blank (a blank new html page that nothing has to do with the application itself).
Why?
To avoid creating the HTML using a string variable as, for example:
var html = '<div>
<h3>My Template</h3>
' + myProperty + '
</div>';
I saw that you can render a component dynamically using ViewContainerRef.createComponent and ComponentFactoryResolver. The problem with this is that the component is rendered inside the view container, in the application. What I would like to do is generate the HTML of that component so that then I can use that HTML to put it wherever I want. (in this case, in the document property of the object given by the window.open() method)
Example:
#Component({
selector: 'app-component',
template: `
<div>
<h3>My Template</h3>
{{ myProperty }}
</div>
`,
styleUrls: ['./my.component.less']
})
export class MyComponent{
myProperty: string;
}
I expect to use it in this way:
//get new window tab
var newTab = window.open('about:blank', '_blank');
//get the HTML of the component
//use it to open the new tab
newTab.document.write(html);
It may help other people so I post here what I did and which problems I found. After looking to some solutions, this one worked for me. The problem was then I realize that Angular sanitizes your HTML removing all possible <script> tags. Unfortunately I had like 3 of them. In addition, if you don't want them to be sanitized, you have to use a service called DomSanitizerand use the method bypassSecurityTrustScript (doc) passing the script as a parameter. So the idea of don't 'stringify' the code was gone. Saying that, I used the original approach, where the HTML is stored in a variable then passed as a parameter to window.open
I have a list of mat-card components that are individually expanded on clicking a button within each card. So far the Boolean variable has been defined within the HTML code itself rather than in the Angular .ts file, however I am wanting to transition this to use a Boolean in the .ts file.
I have attempted to assign a simple Boolean, however I now find that all of the cards expand at the same time...
I know what is wrong, but I cannot think about the way in which to fix it :-/
Here is a stackblitz
Since your cards are created with an ngFor directive from an array, the expanded data should be stored in an array too!
.ts
thisExpands = [];
.html
[ngClass]="{expanded: thisExpands[x]}"
(click)="thisExpands[x] = !thisExpands[x]"
Demo
<div id="editable" contenteditable="true" class="search-input" [textContent]="query" (input)="query=$event.target.textContent" (keyup)="searchClient($event)" (focus)="open()"></div>
This is my HTML code and put the DIV that supports content editable. When I press any key then the searchClient($event) method is triggered and set some value. I need to set the caret(cursor) end of the value and focus it.
I tried out few example but I couldn't figure it out the solution for Angular 4.
Note: I tried out How to set caret(cursor) position in contenteditable element (div)? got this error SearchComponent.html:6 ERROR TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.
You can handle this if you use the Renderer2 API.
1º) Create a variable of the tag you want to focus on and create an event to call a function to change the cursor location. Like:
<div class="example" #tagDiv>
I want to focus in here.
</div>
<button (onclick)="changeCursorLocation()"> Click here </button>
2º) In the component create a ViewChild() and the function:
#ViewChild("tagDiv") tagDivField: ElementRef;
changeCursorLocation(){
const element = this.renderer.selectRootElement('#tagDiv', true);
element.focus();
}
Renderer2: (https://angular.io/api/core/Renderer2)
I did not run this specific peace of code, but i have done something like this in the past and it worked very well. So, I hope it can of any help.
Obs: Remenber to import Renderer2 and ElementRef;
You can change it with this...
<div id="editable" contenteditable="true" class="search-input" [textContent]="query" (input)="Revisedquery=$event.target.textContent" (keyup)="searchClient($event)" (focus)="open()"></div>
Also find this usefull link for deeply study the matter.
https://github.com/angular/angular/issues/9796
I have a input field which I set focus to when my view loads in the following way:
ngAfterViewInit() {
this.focusInput.nativeElement.focus();
}
this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?
It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:
<input type="text" #myInput />
{{ myInput.focus() }}
Just add {{ myInput.focus() }} right after input inside template
The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:
How to move focus on form elements the Angular way
I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector.
You can call change detection after your view change or a click by calling detectchanges().
`constructor(private detRef:ChangeDetectorRef) {}
#ViewChild('name_input') input: ElementRef;
private buttonClick(): void {
this.detRef.detectChanges();
this.input.nativeElement.focus();
}`
Hope this will helpful.