Search code examples
htmlangulartypescriptconstantsglobal

How to add link/href to html from global constants file


I have a global constants file where I added a links node to it but I'm not sure how to translate that node from the constants file into the html file or possibly ts file of the html file.

constants file

 export const GlobalConstants = {   
  links: {
  classicAO: '../MicroUIs/'
 }
}

I added public backToClassicAO() method, but I don't know if that is correct or on the right path

typescript

 import { Store } from '@ngrx/store';
 import { GlobalConstants } from 'src/app/ao-shared/global-constants';

@Component({
    selector: 'app-personalperformance-enhanced-nonqual',
    templateUrl: './personalperformance-enhanced-nonqual.component.html',
    styleUrls: ['./personalperformance-enhanced-nonqual.component.scss'],
 })
export class PersonalperformanceEnhancedNonqualComponent extends AoLoadableComponent {

 constructor(changeDetectorRef: ChangeDetectorRef, store: Store) {
   super(changeDetectorRef, store);
   this.store = store;
  }

  ngOnInit() {
    super.ngOnInit();
    this.registerModalContent();
  } 

  **public backToClassicAO(){
     window.open(GlobalConstants.links.classicAO);**
   }
 }

For the html I don't know if this is need but if so I want the link or href? to be for the words 'go back to the classic experience.

html

<div class="sdps-is-relative badge-example-outline sdps-p-around_medium sdps-m- 
 around_medium">  
  <div class="ao-text-header">Account Overview has a new look</div>
  You can view your retirement accounts below, or <a href="**not sure what if anything 
  goes here**">go back to the classic experience.</a>
</div>

In summary, I'm trying to get the constants file to connect or translate to the html to create a link for around those words.

My terminology my be off and if so I apologize. Tried to the best I can to explain. I would definitely appreciate any assistance or suggestions.


Solution

  • u already import "GlobalConstants", then do u need create a new variable

    _globalConstants = GlobalConstants;
    

    and u can use it like this

    <a [href]="_globalConstants.links.classicAO"