rakia

<ng-container *ngIf="isCreateMode">
          <div class="mt-0">
            <app-create-custom-field
              [ecsFieldset]="entity.id!"
              [nameAlreadyExists]="nameAlreadyExists"
              (checkIfNameExists)="checkIfNameExists.emit($event)"
              (cancelEdit)="cancelEdit.emit()"
              (save)="createCustomField.emit($event)"
            >
            </app-create-custom-field>

rakia

<app-ecs-fieldset
    [entity]="ecsFieldset"
    [fields]="(ecsFields$ | async) || []"
    [nameAlreadyExists]="nameAlreadyExists$ | async"
    (checkIfNameExists)="checkIfNameExists($event)"
    (cancelEdit)="onCancelEdit()"
>
</app-ecs-fieldset>

rakia

@Component({
  selector: 'app-create-custom-field',
  templateUrl: './create-custom-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CreateCustomFieldComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);
  
  @Input() nameAlreadyExists: boolean | null = false;
  @Output() checkIfNameExists = new EventEmitter<string>();

rakia

@Component({
  selector: 'app-ecs-fieldsets-with-details',
  templateUrl: './ecs-fieldsets-with-details.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldsetsWithDetailsComponent implements OnChanges {
  private storeService = inject(EcsFieldsStoreService);

  nameAlreadyExists$ = new BehaviorSubject<boolean>(false);

rakia

<!-- Show warning: Name already exists -->
<ng-container *ngIf="nameAlreadyExists">
    <div class="mb-4 text-red-600">
        {{ "WARNING.DUPLICATE_NAME" | transloco }}
    </div>
</ng-container>

rakia

const routes: Routes = [
  { path: "dashboard", component: DashboardComponent },
  {
    path: "profiles",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userId = queryParams['userId'];
      if (userId) {
        // return the appropriate redirect path based on the userId query-parameter
        return `/profiles/${userId}`;

rakia

const routes: Routes = [
  {
    path: 'route1',
    component: Route1Component,
    renderMode: 'stategy1' // renderMode option 1
  },
  {
    path: 'route2',
    component: Route2Component,
    renderMode: 'strategy2' // renderMode option 2

rakia

const routes: Routes = [
{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [
    () => {
      const router: Router = inject(Router);
      const urlTree: UrlTree = router.parseUrl('/error');
      return new RedirectCommand(urlTree, { skipLocationChange: true });
    },

rakia

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class ProfileFormComponent {
  private fb = inject(FormBuilder);

  profileForm: FormGroup;

  ngOnInit() {
    this.profileForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(2)]],

rakia

@Component({
  selector: 'main-layout',
  template: `
    <ng-content select="header">Hello again</ng-content>
    <ng-content><p>Default content if none is provided.</p></ng-content>
    <ng-content select="footer"></ng-content>
  `
})
export class MainLayoutComponent {}