Add case (capitalize, uppercase, lowercase) option to breadcrumb object

[KBeDevel]

I'm using xng-breadcrumb@5.0.1 in a project with angular-cli@9.1.3. I'd like to be able to set a label with a full uppercase string using a breadcrumb object property

Actually, I get this using CSS in my component:

::ng-deep .xng-breadcrumb-trail {
	text-transform: uppercase;
}

But this modify the whole project breacrumb trails to uppercase.

I'm thinking in an optional property named case assignable to the breadcrumb object:

...,
data: {
  breadcrumb: {
    label: 'foo',
    case: 'capitalize | 'lowercase' | 'uppercase'
  }
}

[KBeDevel]

IMPORTANT NOTE: breadcrumbService.set() is not working for this using the versions described above.

[udayvunnam]

@KBeDevel you can transform the breadcrumb label as you wish. Please check https://github.com/udayvunnam/xng-breadcrumb#change-text-case.

Let me know if you further need any info

[udayvunnam]

Additionally, you will also get the context of first and last items in breadcrumbs for customization. Check -

xng-breadcrumb/projects/xng-breadcrumb-app/src/app/app.component.html

Lines 33 to 41 in 730a309

	<div>
	<label for="advancedTemplate2">Advanced template2 </label>
	<xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb" id="advancedTemplate2">
	<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
	<mat-icon *ngIf="info">{{ info }}</mat-icon>
	<ng-container *ngIf="!first">{{ breadcrumb | titlecase }}</ng-container>
	</ng-container>
	</xng-breadcrumb>
	</div>

[KBeDevel]

@udayvunnam How can I use string pipes for an specific route param/child?

[udayvunnam]

You can pass arbitrary context to a specific route using 'info param' and that will be passed to xngBreadcrumbItem

{
	path: 'foo',
	data: {
	  breadcrumb: {
	    label: 'myFoo',
	    info: {case: 'upper'}
	  }
	}
},
{
	path: 'bar',
	data: {
	  breadcrumb: {
	    label: 'myBar',
	    info: {case: 'lower'}
	  }
	}
}

<xng-breadcrumb [separator]="separatorTemplate"> 
	<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info> 
       <ng-container *ngIf="info && info.case.upper">{{ breadcrumb | uppercase }}</ng-container> 
       <ng-container *ngIf="info && info.case.lower">{{ breadcrumb | lowercase }}</ng-container> 
       <ng-container *ngIf="!info>{{ breadcrumb }}</ng-container> 
	</ng-container> 
</xng-breadcrumb> 

Else, create your own pipe that acts according to the text passed and pass it the info.case text.

<xng-breadcrumb [separator]="separatorTemplate"> 
	<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info> 
       <ng-container>{{ breadcrumb | myOwnCasePipe: info.case }}</ng-container> 
	</ng-container> 
</xng-breadcrumb> 

[KBeDevel]

@udayvunnam Nice! It works. But with a little fix. Replace info.case.upper with info.case === 'upper'

...},
{
  path: 'fooPath',
  component: fooComponent
  data: {
    breadcrumb: {
      info: {
        case: 'upper'
      }
    }
  }
},
...

<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info">
  <ng-container *ngIf="!info">{{ breadcrumb | titlecase }}</ng-container>
  <ng-container *ngIf="info && info.case === 'upper'">{{ breadcrumb | uppercase }}</ng-container>
  <ng-container *ngIf="info && info.case === 'lower'">{{ breadcrumb | lowercase }}</ng-container>
</ng-container>

This worked for me. Thank you.