How to display HTML snippet in an AngularDart app through components? - dart

Question

I am trying to display IMDB rating through IMDB plugin HTML snippet in an angularDart app but displaying it through components doesn't works. It only displays the logo and doesn't renders the scripts which displays the rating.
app_component.html
<div class="material-content">
<header class="material-header shadow">
<div class="material-header-row">
<span class="material-header-title">SIMPLE TITLE</span>
<div class="material-spacer"></div>
<div class="header-navigation">
<nav class="material-navigation">
<a>Link 1</a>
</nav>
<nav class="material-navigation">
<a>Link 2</a>
</nav>
<nav class="material-navigation">
<a>Link 3</a>
</nav>
</div>
</div>
</header>
<div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
<span class="imdbRatingPlugin" data-user="ur69296978" data-title="tt7215444" data-style="p1"><a href="https://www.imdb.com/title/tt7215444/?ref_=plg_rt_1"><img src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/images/imdb_46x22.png" alt=" The Final Year
(2017) on IMDb" />
</a></span><script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js";stags.parentNode.insertBefore(js,stags);})(document,"script","imdb-rating-api");</script>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
<material-toggle [(checked)]="customWidth" label="custom width">
</material-toggle>
</div>
</div>
app_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
#Component(
selector: 'my-app',
directives: const [
materialDirectives,
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
MaterialListComponent,
MaterialListItemComponent,
],
templateUrl: 'app_component.html',
styleUrls: const [
'app_component.css',
'package:angular_components/app_layout/layout.scss.css',
],
)
class ApprComponent {
bool customWidth = false;
bool end = false;
}

Answer 1

You can't add <script> tags to Angular component templates.
Angular will just drop it.
You can add the script tag imperatively though.
The code would look quite similar to this TS example Adding script tags in Angular2 component template

Answer 2

Angular disallow that kind of usage for safety reason.
But you can try dart_browser_loader package.
ngAfterViewInit() async {
await loadScript(
'https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js',
id: 'imdb-rating-api',
);
}
it will load the script you want in the head of your html page

Answer 3

Inside App component
You can execute external script inside angular component like this:
ngOnInit() {
const _script = '<script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js";stags.parentNode.insertBefore(js,stags);})(document,"script","imdb-rating-api")';
const fun = new Function(script);
}
It will execute your external script.