How to use it with Angular 6+

[ryanhamley]

Can you provide some information on what issue you're seeing using this with Angular 6+?

[dashtaki]

This is one of my layer and I want to use it rtlText.processBidirectionalText(text, []) in text-field property:

 {
          'id': 'titles',
          'type': 'symbol',
          'source': 'G_Rahro_source',
          'zoom': 0.0,
          'center': [0.000000, 0.000000],
          'layout': {
            'text-rotate': ['to-number', ['get', 'ROTATION']],
            'text-field': {type: 'identity', property: 'TITLE1'},
            'text-size': ['to-number', ['get', 'FONT_SIZE']],
            'text-font': ['IRANSansWebFaNum Regular']
          },
          'paint': {
            'text-color': {type: 'identity', property: 'FONT_COLOR'}
          },
        },

Could you explain how to use it in Angular project. I got stock in for a while. I have to get text-field value from .geojson file and because it is in Persian I have to make it as bidirectional.

[ryanhamley]

You shouldn't need to call processBidirectionalText directly in a function like that if you're just trying to make text render RTL. You just need to include the plugin as in this example https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/

I don't know specifics of newer Angular implementations to offer many pointers there. You might have better luck asking on Stack Overflow which is where we generally refer "how to" questions like this. But if there's something you're doing differently in your setup that's causing problems and you can replicate that outside of Angular, I'd be happy to take a look if you can reply to this thread with a JSBin or something similar.

[dashtaki]

Thanks so much for your help finally I could do that perfectly. I forgot to import it in component:

import * as mapBoxGl from 'mapbox-gl';

And then:

mapBoxGl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js', () => {}); Thanks again @ryanhamley