@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Hello from {{ name }}!
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

<app-root></app-root>

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    Navbar,
    UserProfile,
  ],
  template: `
    <navbar />
    <user-profile />
  `,
})
export class App { }

@Component({
  selector: 'user-profile',
  standalone: true,
  template: `
    <h1>User Profile</h1>
    User details here...
  `,
})
export class UserProfile { }

@Component({
  selector: 'navbar',
  standalone: true,
  template: `
    Navbar at the top
  `,
})
export class Navbar { }

<app-root></app-root>

@Component({
  selector: 'user-profile',
  imports: [
	NgIf,
    UserDetails,
    NoDataFound,
  ],
  template: `
    <h1>User Profile</h1>

    <div *ngIf="user; else #noDataFound">
      <user-details
        [user]="user">
      </user-details>
    </div>

    <ng-template #noDataFound>
      <no-data-found></no-data-found>
    </ng-template>
  `,
})
export class UserProfile { }

@Component({
  selector: 'user-profile',
  imports: [
    UserDetails,
    NoDataFound,
  ],
  template: `
    <h1>User Profile</h1>
	@if (user) {
      <user-details
		[user]="user" />
    } @else {
	  <no-data-found />
    }
  `,
})
export class UserProfile { }

Name: {{user.name}}
<ul>
  @for(hb of user.hobbies; track hb.id) {
    <li> {{ hb.name }} </li>
  }
  @empty {
    <li>
      <no-data-found />
	</li>
  }
</ul>

Name: {{user.name}}
<ul>
  <li *ngFor="let hb of user.hobbies">
	{{ hb.name }}
  </li>
  <li *ngIf="!user.hobbies.length">
	<no-data-found />
  </li>
</ul>

<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

@switch (accessLevel) {
  @case ('admin') {
    <admin-dashboard/>
  }
  @case ('moderator') { 
    <moderator-dashboard/> 
  }
  @default { 
    <user-dashboard/> 
  }
}

export const routes: Routes = [
  {
    path: 'home',
    component: Home,
  },
  {
    path: 'user',
    children: [
	  {
		path: 'edit/:id',
		component: UserEdit,
	  },
	  {
		path: 'add',
		component: UserEdit,
	  },
	  {
		path: 'list',
		component: UserList,
	  },
    ]
  },
  {
    path: '**',
    redirectTo: 'home',
  },
];

// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideRoute(routes),
  ],
});

export const routes: Routes = [
  {
    path: 'home',
    component: Home,
  },
  {
    path: 'user',
    loadChildren: () => import('./user/routes')
  },
  {
    path: '**',
    redirectTo: 'home',
  },
];

// user/routes.ts
export default [
  {
    path: 'edit/:id',
    loadComponent: () => import('./user-edit.component'),
  },
  {
    path: 'add',
    loadComponent: () => import('./user-add.component'),
  },
  {
    path: 'list',
    loadComponent: () => import('./user-list.component'),
  },
];

import {
  provideClientHydration,
  withEventReplay,
  withIncrementalHydration,
} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [
    providerRouter(routes),
    ...,
    provideClientHydration(
	  withEventReplay(),
	  withIncrementalHydration(),
  	)
  ]
});

@defer (on idle; hydrate on interaction) {
  <example-cmp />
} @placeholder{
  <div>Example Placeholder</div>
}

firstName = 'Adam';

lastName = 'Clarke';

fullName = `${this.firstName} ${this.lastName}`;
console.log(this.fullName); // Adam Clarke

updateFirstName() {
  this.firstName = 'Mr. Adam';
}

this.updateFirstName();
console.log(this.fullName); // Adam Clarke

get fullName() {
  return `${this.firstName} ${this.lastName}`;
}

const count = signal(1);
const age = signal<number>(18);
const user = signal<User>({
  id: 1,
  name: 'Pankaj'
});

@Component({
  ...,
})
export class SignalComponent {
  firstName = signal('Pankaj'); // declare
  lastName = signal('Parkar'); // declare
  
  // derive a value from other signal
  fullName = computed(() => 
    // get signal value by calling `()`
    `${this.firstName()} ${this.lastName()}`
  );

  firstNameEffect = effect(() => 
    console.log(this.firstName())
  );

  updateFirstName() {
    // set signal value
    this.firstName.set('Pankajj');
  }
}

<div>
  {{firstName()}}
  {{lastName()}}
  {{fullName()}}
</div>

<button
  (click)="updateFirstName()">
  Update FirstName
</button>

@for(product of products.value(); track product.id){
  <tr>
    <td>{{p.id}}</td>
    <td>{{p.name}}</td>
    <td>{{p.price}}</td>
  </tr>
}
@if(product.error()) {
  Error retrieving data... 🚨📢🔔⚠️
}
@if(product.isLoading()) {
  Loading ... ⌛
}

product = resource({
  loader: async (param) => {
    return fetch('http://localhost:3000/products')
	  .then((res) => res.json() as Promise<Product[]>);
  },
});