As a complete novice in the world of Angular, I've done my fair share of research but still can't seem to find what I'm looking for.
Here's a snippet of code that I'm working with:
@Component({
selector: "help-icon",
templateUrl: "help-icon.component.html",
styleUrls: ["help-icon.component.scss"],
host: {
"[class.active]": "show",
"(click)": "open($event)"
}
})
export class HelpIconComponent {
@Input() helpId: string;
@Input() placement: string = "left";
@ViewChild("pop") pop: PopoverDirective;
public htmlHeader: string = "Loading help text";
public htmlBody: string = "Please wait...";
constructor(private elementRef: ElementRef, private backend: Backend,
private helpTextService: HelpTextService, private ngZone: NgZone) { }
open(): void {
this.helpTextService.getHelpText(this.helpId).then(data => {
if (data && (data.HeaderText || data.Body)) {
this.htmlHeader = data.HeaderText;
this.htmlBody = data.Body;
}
else {
this.htmlHeader = "<div class='help-text-unavailable'>
Help text is currently unavailable.</div>";
this.htmlBody = "";
}
this.pop.show();
});
}
}
All help icons by default have the popover's placement set to left. In the HTML of this component, the placement is configured like this:
<ng-template #popTemplate>
<div class="popover-wrapper" #popTemplate>
<button tabindex="-1" class="close-help-box" (click-space-enter)="pop.hide()">
<span class="icon-close" />
</button>
<div class="header" [innerHtml]="htmlHeader"></div>
<div class="body" [innerHtml]="htmlBody"></div>
</div>
I'm faced with a challenge where four specific form fields with icons need to be displayed on top. These four help icons are nested two levels down, structured like this:
<question structureSectionColumn2 property="User Input"
[query]="propertyQuery.DetailsQuestionQueries.get('User Input')">
<question-label class="left-content">User Input:
<help-icon class="help-icon" helpId="UserInput">
<question-help-icon class="icon-content" />
</help-icon>
</question-label>
<select-input class="right-content" />
</question>
Therefore, I need to designate the User Input with a property such as popoverPlacement="top" and pass it down to the question-help-icon. How can this be achieved? Any simpler solutions would be greatly appreciated. Thank you!