What is the helper function for "lowercase" when writing an Angular schematic template?

Question

I'm working on building a simple angular schematic template following a tutorial here. All going well. This tutorial uses a helper function (dasherize) to convert the file name from AwesomeWrap to hello-awesome-wrap.

hello-__name@dasherize__

I want to change this functionality in my own implementation to simply ensure file names are lower case, so AwesomeWrap should be awesomewrap.

This functionality doesn't seem well documented though (or not that I can find) and I can't find a list of available functions for this. I tried creating a file view-__name@lowercase__.ts but lowercase didn't seem an available function.

When I run schematics .:sensor --name=test, I get the error message:

Error: Pipe "lowercase" is not defined.

So what is the correct syntax for this? Is there a list of available transforms that can be performed in this way?

score 2 · Accepted Answer · answered May 17 '19 at 08:12

There is currently no lowercase in the Angular Schematics Devkit package.

You can see all the supported functions here: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/core/src/utils/strings.ts

If you need a lowercase function you can open a Pull Request for this file and add it.

score 0 · Answer 2 · answered May 17 '19 at 08:05

0

I can only image that they transform dasherize__ to require('dasherize')(__). Where __ is obviously the name of the file. Soo, I guess we need to find a package which does lowercase for you:

npm install lower-case

And I guess you can then use this as:

view-__name@lower-case__.ts

answered May 17 '19 at 08:05

Poul Kruijt

69,713
12
145
149

Added the error message if that's any help. It seems to be looking for a pipe but lowercase is the correct pipe so I'm not sure what I'm missing – Liam May 17 '19 at 08:11
1

@Liam Aw, unfortunately! Was worth a shot :D. There should be a way though, to extend the angular devkit. Otherwise I believe it's quite limited – Poul Kruijt May 17 '19 at 08:18
Yeah again, makes good sense. I might just submit a PR, it's seems an obvious piece of missing functionality and really simple to implement – Liam May 17 '19 at 08:22

Muhammet Can TONBUL · Answer 3 · 2021-03-19T13:39:49.800

Sorry for late answer.

In your template file(example: ./files/__name@dasherize__.component.ts)file just use string.toLowerCase()

import { Component } from '@angular/core';

@Component({
  selector: "<%= name.toLowerCase() %>",
  template: `
  `,
})
export class <%= classify(name)%>Component {

}

If you want to use it like dasherize, go to index.ts

export function mySchematics(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates = url('./files');

    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ..._options,
        ...strings,
        tolowercase
      })
    ]);

    return mergeWith(sourceParametrizedTemplates)(tree, _context);
  };
}

export function tolowercase(value: string): string {
  return value.toLowerCase();
}

Then you can use like in folder or file name:

__name@tolowercase__component.ts

also use in template like this

import { Component } from '@angular/core';

@Component({
  selector: "<%= tolowercase(name) %>",
  template: `
  `,
})
export class <%= classify(name)%>Component {

}

What is the helper function for "lowercase" when writing an Angular schematic template?

3 Answers3