Use Anymod in an Angular 2+ project

Setup

To use Anymod with Angular 2+, add the Anymod script tag into your document <head> before any Angular script tags. Then make Anymod available in your .ts file:

declare var Anymod: any;
1

Now you can add your mod and call Anymod.render() to render the mod:

@Component({
  ...
  template: `<div id="anymod-aklnr"></div>`,
})
class AnymodDemo {
  ...
  ngOnInit() {
    Anymod.render()
  }
}
1
2
3
4
5
6
7
8
9
10

You can use Anymod.render() by itself or with a callback or promise. See the section on Anymod.render for more.

Example

The following example shows a mod being rendered in typescript with Anymod.render:

Rendering multiple mods

You can render multiple mods the same way as a single mod, and you only need to call Anymod.render() once:

@Component({
  ...
  template: `
    <!-- Card with top image -->
    <div id="anymod-aklnr"></div>
    <!-- GitHub button -->
    <div id="anymod-oorka"></div>
    <!-- Team page -->
    <div id="anymod-dmkdn"></div>  
  `,
})
class AnymodDemo {
  ...
  ngOnInit() {
    Anymod.render()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Re-rendering

You can call Anymod.render() as often as you'd like in your Angular code (or elsewhere). This method will not lead to an API call every time; if a mod has already been fetched once, Anymod.render() will use that data instead of making another API call.

TIP

See the section on Anymod.render for more.

Last Updated: 10/5/2018, 9:15:24 PM