Wrapper Library of arc-text to curve any text font on the web directly with angular.
npm install ngx-arc-text --save- Add to import Modules
import { NgxArcTextModule } from 'ngx-arc-text';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxArcTextModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- You can use NgxArcTextComponent in your component:
<ngx-arc-text
[text]="text"
[arc]="arc"
[direction]=direction
#letters>
</ngx-arc-text>| Parameter | Type | Default | Description |
|---|---|---|---|
| text | string | Text you want to curve | |
| arc | number | 150 | Angle you want to curve |
| direction | number | 1 | 1 is clockwise mode and -1 is counter-clockwise mode |
| Name | Params | Description | | ------ | ------ | ------ | ------ | | update | | Re-Render again the curve text, is necesary if you change all style in your font, for example, size or font-family. |
how to access?
You can see in the example the tag '#letters', so in your controller you can get the ViewChild.
import { INgxArcTextComponent } from 'dist/ngx-arc-text';
@ViewChild('letters') letters: INgxArcTextComponent;Now you can update and see the component status.
Alex Marcos Gutierrez
MIT