Discussion :

[pcouas]

Bonjour

j'ai besoin en Typescript de mettre en majuscule la premiere letttre d'une String
J'ai fait ma propre fonction, mais je me dis qu'il doit bien exister quelque chose de standard qui me permettrait de l'avoir dans plusieurs de mes TS sans faire mon propre service ?

Merci de vos réponses
Phil

[Doksuri]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function capitalizeFirstLetter(str:string):string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

?

[pcouas]

Bonjour

Je me suis mal exprimé, le code je l'ai
Je me posais la question si il n'existait pas un npm standard pour ce type d'opération sur les chaines ou si j'allais devoir moi même factoriser cela dans un "service" utilitaire ?
Merci

[jreaux62]

Bonjour,
(je ne connais pas du tout Angular)

c'est possible en CSS.

Mais vu que tu n'es pas "bavard" sur le besoin exact...

[pcouas]

Le besoin est coté Angular, car j'ai des "IF" lié a cela je reecris un front, mais je dois garder le Back actuel
Je note que c'est possible en CSS pure, cela peut m'interesser

[jreaux62]

Un code CSS peut s'appliquer sur une classe HTML.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<balise class="machin">....</balise>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.machin:first-letter {
   text-transform: capitalize;
}

Cette classe peut certainement être appliquée dynamiquement en JS à n'importe quel élément.
(je ne connais touojours pas Angular )

N.B. A l'origine, c'est destiné à créer des LETTRINES.
Ce n'est peut-être pas ton besoin (dont on ne sait toujours...pas grand'chose)

[Doksuri]

j'avais hesite a donner la solution CSS, car a le tableau de compatibilite est faible (que firefox) developer.mozilla.org/fr/docs/Web/CSS/::first-letter#compatibilit%C3%A9_des_navigateurs

apres... est-ce vraiment util de recuperer un code npm juste pour 1 ligne de code ... je ne sais pas (et je ne sais pas non plus s'il y a deja quelque chose d'equivalent sur npm)

[jreaux62]

@Doksuri
Tu as mal lu le tableau de compatibilité.

• :first-letter est compatible partout (les flèches noires peuvent prêter à confusion -> cliquer dessus)
• c'est "Support for the Dutch digraph IJ" qui ne l'est pas

[krakatoa]

en angular on peut utiliser un pipe personnalisé !
apres pas besoin vu que le css te permet de le faire facilement

[NoSmoking]

Bonjour,

le pseudo-élément :fisrt-letter, avec un seul :, est opérationnel depuis la nuit des temps : 2.4 The 'first-letter' pseudo-element

Le pseudo-élément ::first-letter, avec un double :: à été introduit par CSS3 pour différencier les pseudo-élements des pseudo-classes, mais le comportement reste le même.

apres pas besoin vu que le css te permet de le faire facilement

oui d'une manière générale la mise en forme est à laisser au CSS, pas de modification « physique » des données.

[pcouas]

Bonjour

J'en ai besoin pour faire des tests, car ce que je recupere du "Back" que je ne peux modifier m'impose des tests et pas uniquement de l'affichage
Donc il me reste 3 possibilité
1 un module "utilitaire"
2 créer un composant de base avec quelques méthodes comme cela et mes autres composants herite de celui la
3 j'ai vu que la méthode existait dans "dans require-await.js", voir si je peux l'importer seule sans dépendance avec la terre entière

Merci pour vos réponses

[dukoid]

on peut faire des tests sur un pipe personnalisé

[pcouas]

Bonjour

Comment fais tu les tests en direct pour l'instant j'ai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
* Dans le HTML
*ngIf="sommaire.typeDePersonne === MultilingueConst.mPhysique && CapitalizeFirst(sommaire.genre) === MultilingueConst.mGenreFemme"
 
Dans le typescript
 
    CapitalizeFirst(string) {
        return string[0].toUpperCase() + string.slice(1);
    }

Mais je voudrais passer par du standard au lieu de creer ma propre fonction dans le typescript en plus je vais l'avoir dans plusieurs composants

Merci

[dukoid]

c'est tout un programme !

(1)
tester la fonction : CapitalizeFirst(...) qui se trouve dans le composant

(2)
pour faciliter le test, mettre la condition dans le .ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

*ngIf="isMulti()"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
isMulti(): boolean {
  return sommaire.typeDePersonne === MultilingueConst.mPhysique && CapitalizeFirst(sommaire.genre) === MultilingueConst.mGenreFemme;
}

et donc tester : isMulti() avec différentes valeurs de : sommaire.typeDePersonne, sommaire.genre etc.

(3)
faire des tests e2e sur la vue.

(4)
remarque :
j'aurais fait ma propre directive plutôt que d'utiliser un ngIF !

(5)
https://github.com/memory660/angular...ckr-search.git

dans ce projet, il y a 3 types de tests différents qui font la même chose à chaque fois.
- des tests avec testBed (par défaut les fichiers .specs)
- des tests avec spectactor ( fichiers .spectactor.specs)
- des tests cypress dans le dossier : cypress

si tu débutes, regarde uniquement les testBed (.specs)

[pcouas]

bonjour j'ai beaucoup de pages en AngularJS que je reecris en Angular13 dans lesquelles j'ai ce type de tests

Merci