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

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;
}

score 2 · Answer 1 · answered Aug 01 '18 at 07:48

2

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

answered Aug 01 '18 at 07:48

Günter Zöchbauer

623,577
216
2,003
1,567

score 0 · Answer 2 · answered Sep 25 '18 at 12:01

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

prashant · Answer 3 · 2018-09-25T09:43:09.233

-1

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.

edited Sep 25 '18 at 09:43

answered Sep 17 '18 at 06:37

prashant

1
3

Welcome to Stack Overflow! Please don't answer just with source code. Try to provide a nice description about how your solution works. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks – sɐunıɔןɐqɐp Sep 17 '18 at 07:02

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

3 Answers3