#ConvertText

[nguyenthanhkhiem]

How to convert text into an audio file?

Thinking of you want to make an audiobook. The first thing we all know is how to read the text out loud with a clear and natural voice. To do this, you have to record your voice yourself or hire someone else to do it for you. https://youtu.be/NaWcJr07UTM In case you want to make a large number of audiobooks or videos quickly, you can not make them by just recording your voice only, reading the text day after day. Hiring somebody to do those pieces of stuff is not used. They cannot make it faster and it even costs you a fortune. Luckily, we have a FREE online tool to convert text into audio files for you. With many languages supported, it can read the text out loud with a natural voice, just in seconds. Link to the tool: https://tts.adcrew.us. It worth giving it a try. https://youtu.be/p_Hk7Hi4obo How to turn text into voices? #TextWithAI #texttovoice #textspeak #converttext #texttoaudio #texttowav #texttomp3 Read the full article

[codesolutionsstuff]

How to Create Custom Pipe in Angular 13 Application

Pipe tutorial for Angular 12; In this tutorial, we'll learn about Angular's default and custom pipes. Angular comes with a plethora of built-in Pipes that can help you solve a variety of programming issues while designing a single-page web application. We'll also learn how to build custom��Angular Pipe from the ground up. Let's get started without further hesitation:

Angular 13 Pipe Example

- Working with Angular Pipes - Angular Built-in Pipes - Creating Custom Pipe in Angular

Getting Started

Pipes are incredibly important when it comes to managing data within interpolation " | ", and we'll talk about them in Angular. Pipes were once known as filters in Angular, but they are now known as Pipes. The letter | can be used to alter data. The syntax for the same can be found below. {{ i will become uppercase one day | uppercase }} Dates, arrays, texts, and integers are all acceptable inputs for pipes. | is used to separate inputs. Before being shown in the browser, the inputs will be transformed into the desired format. We'll take a look at a few pipe-related instances. We're attempting to show the given text in uppercase in the given example. You'll be able to do that with the use of pipes, as demonstrated below — The convertText variable is defined in the app.component.ts file - app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: }) export class AppComponent { convertText: string = "I Am Being Managed By Pipes"; } The following code section can be found in the app.component.html file. app.component.html {{convertText | lowercase}} {{convertText | uppercase}}

Angular Built-in Pipes

Angular Pipes allow you to rapidly recreate data in your Angular app. Angular has a built-in Pipes API that allows you to quickly change your data. You may also use it to make custom Pipes in your app. Let's take a look at some of the most helpful Angular Pipes. Built-in Angular Pipes - Async Pipe - Currency Pipe - Date Pipe - Slice Pipe - Decimal Pipe - Json Pipe - Percent Pipe - LowerCase Pipe - UpperCase Pipe

How to Use Built-in Pipes in Angular 13

Let's see how we may make advantage of the built-in Angular pipes. 1. Async Pipe When obtaining data in the form of observables, the Async pipe is regarded the best technique. The async pipe automatically subscribes to an Observable/Promise and returns the values delivered. {{ users.name }}   2. Currency Pipe The angled currency pipe allows you to convert numbers between different currencies. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Currency Pipe {{ itemPrice | currency:'USD':true }} {{ itemPrice | currency:'EUR':true}} {{ itemPrice | currency:'INR' }} ` }) export class AppComponent { itemPrice: number = 5.50; }   3. Date Pipe In Angular, the date pipe is used to format the Date. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Date Pipe {{ currentDate | date:'fullDate' }} {{ numDateFormat | date:'medium' }} {{ getYear | date:'yy' }} {{ getTime | date:'Hm' }} ` }) export class AppComponent { currentDate = Date.now(); numDateFormat = 1478496544151; getYear = 'Tue Dec 12 2018 11:20:18 GMT+0530'; getTime = 'Wed Jan 20 2019 12:20:18 GMT+0530'; }   4. Slice Pipe In Angular, the Slice pipe API creates a subset list or string. {{ users }}   5. Decimal Pipe In Angular, the Decimal pipe is used to format decimal numbers. CommonModule in Angular has issues with the Decimal Pipe API. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Decimal Pipe {{myNum1 | number}} {{myNum2 | number}} ` }) export class AppComponent { myNum1: number = 7.4364646; myNum2: number = 0.9; }   6. Json Pipe The JSON pipe API allows an Angular app to expose an object as a JSON string. Behind the scenes, it complements the JSON.stringify function. {{ objectName | json }}   7. Percent Pipe In Angular, the Percent pipe API converts an integer to its percentage value. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` LowerCase & UpperCase Pipe A: {{numA | percent}} B: {{numB | percent:'4.3-5'}} ` }) export class AppComponent { numA: number = 0.349; numB: number = 2.4595; }   8. LowerCase & UpperCase Pipe In an Angular app, lowercase or uppercase pipes help format text to lower or upper case. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` LowerCase & UpperCase Pipe {{convertText | lowercase}} {{convertText | uppercase}} ` }) export class AppComponent { convertText: string = "I Am Being Managed By Pipes"; }

How to Create Custom Pipe in Angular 13

Let's look at how we can make a custom pipe now. Run the following command in Angular CLI to construct a custom pipe to count words: ng g pipe wordcount After running the command in Angular CLI, this is how it will look. ng g pipe wordcount # CREATE src/app/wordcount.pipe.spec.ts (199 bytes) # CREATE src/app/wordcount.pipe.ts (207 bytes) # UPDATE src/app/app.module.ts (433 bytes) This command will automatically generate the files wordcount.pipe.ts and wordcount.pipe.spec.ts, as well as update the app.module.ts file. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Custom Pipe imported here by Angular CLI import { WordcountPipe } from './wordcount.pipe'; @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { } Now, utilizing the PIPE API service, let's construct a logic for word counting in a string in Angular. Use the code below to open the wordcount.pipe.ts file. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'wordcount' }) export class WordcountPipe implements PipeTransform { transform(value: any, args?: any): any { return value.trim().split(/s+/).length; } } app.component.ts import { Component } from '@angular/core'; // Usage of wordcount pipe within interpolation @Component({ selector: 'app-root', template: ` Word Counter Pipe in action below

{{ customText | wordcount }}

` }) export class AppComponent { customText: string = "Java is to JavaScript what car is to Carpet."; } I hope you will like the content and it will help you to learn How to Create Custom Pipe in Angular 13 Application If you like this content, do share. Read the full article