Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

The buttons and all functions on the page do not work when you first log in with the open Id connection.


I log in to the page with open Id conncet. After logging in, no action is performed as if the page is frozen, but after refreshing the page, all buttons and functions start working.

<div *ngIf="!isLoggedIn()">
<h1>HoÅŸ Geldiniz!</h1>
<p>Burada oturum açabilirsiniz.</p>
<button (click)="login()">Oturum Aç</button>

</div>
<div *ngIf="isLoggedIn()">
<app-home></app-home>


</div>

When I do it this way

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8" />
<base href="/">
<meta name="description" content="jhkhjk" />
<meta name="keywords" content="metronic, bootstrap, bootstrap 5, angular, VueJs, React, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel starter kits, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:locale" content="en_US" />

<meta property="og:type" content="article" />
<meta property="og:title" content="Metronic - Bootstrap Admin Template, HTML, VueJS, React, Angular. Laravel, Asp.Net Core, Ruby on Rails, Spring Boot, Blazor, Django, Express.js, Node.js, Flask Admin Dashboard Theme & Template" />
<!--<meta property="og:url" content="https://keenthemes.com/metronic" />
<meta property="og:site_name" content="Keenthemes | Metronic" />-->

<title>Ä°stikbal</title>
<link rel="shortcut icon" href="assets/media/logos/hjkjk.png" />
<link rel="canonical" href="https://preview.keenthemes.com/metronic8" />

<!--begin::Fonts(mandatory for all pages)-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
<!--end::Fonts-->
<!--begin::Vendor Stylesheets(used for this page only)-->
<link href="/assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
<script>// Frame-busting to prevent site from being loaded within a frame without permission (click-jacking) if (window.top != window.self) { window.top.location.replace(window.self.location.href); }</script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body id="kt_app_body" data-kt-app-layout="dark-sidebar" data-kt-app-header-fixed="true" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true" data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">
<!--begin::Theme mode setup on page load-->
<app-root></app-root>
<script>var defaultThemeMode = "light"; var themeMode; if (document.documentElement) { if (document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if (localStorage.getItem("data-bs-theme") !== null) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>
<!--end::Theme mode setup on page load-->
<!--begin::App-->

<!--end::App-->
<!--begin::Drawers-->
<!--begin::Activities drawer-->

<script>var hostUrl = "assets/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--begin::Vendors Javascript(used for this page only)-->
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/continentsLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/usaLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldTimeZonesLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldTimeZoneAreasLow.js"></script>
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
<!--end::Vendors Javascript-->
<!--begin::Custom Javascript(used for this page only)-->
<script src="assets/js/widgets.bundle.js"></script>
<script src="assets/js/custom/widgets.js"></script>
<script src="assets/js/custom/apps/chat/chat.js"></script>
<script src="assets/js/custom/utilities/modals/upgrade-plan.js"></script>
<script src="assets/js/custom/utilities/modals/create-app.js"></script>
<script src="assets/js/custom/utilities/modals/new-target.js"></script>
<script src="assets/js/custom/utilities/modals/users-search.js"></script>
<!--end::Custom Javascript-->
<!--end::Javascript-->
</body>
</html>
My index page is like this


G
Guest 9 months ago
Angular HTML
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Faizal Author8 months ago

Hi,

Here are a few things you can try:

Open the browser's developer tools and check the console tab for any errors. This can provide clues about what might be going wrong.

Ensure that your routes are correctly set up in your routing configuration (app.routing.ts or similar) and match the paths used in your menu links.

Verify that your isLoggedIn() method is correctly detecting the authentication status. You can add console.log statements to check if it returns the expected value.

Inspect the generated HTML for your menu links and buttons to ensure they are correctly rendered and have the expected attributes and event handlers attached.

If the issue occurs only when using OpenID Connect, try to debug the authentication flow. Verify that the authentication tokens are being correctly obtained and stored.

Double-check your OpenID Connect configuration to ensure that it is correctly set up and that all required parameters are being sent and received as expected.

As a troubleshooting step, you can temporarily disable OpenID Connect and see if the issue persists. This can help identify if the problem is related to the authentication mechanism.


user
Faizal Author9 months ago

Hi

Please check the change detection strategy used in your Angular application. It's possible that the state changes triggered by the OpenID connection are not being detected by Angular until you manually refresh the page. Consider using `OnPush` change detection strategy or manually triggering change detection after the OpenID connection to ensure that the UI updates correctly.

In Angular, change detection is the mechanism used to automatically update the view to reflect the current state of the application. By default, Angular uses the ChangeDetectionStrategy.Default change detection strategy.

The OnPush strategy option, can be change in @Component decorator:

@Component({
 selector: "app-your-component",
 templateUrl: "./your-component.component.html",
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
 // Component logic here
}


With OnPush strategy, you'll need to manually trigger change detection when necessary. You can do this by injecting ChangeDetectorRef in your component and calling its detectChanges method:

import { ChangeDetectorRef } from "@angular/core";

@Component({
 selector: "app-your-component",
 templateUrl: "./your-component.component.html",
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
 constructor(private cdr: ChangeDetectorRef) {}

 someMethod() {
 // Logic that changes the state of your component
 // For example, after OpenID connection
 this.cdr.detectChanges(); // Manually trigger change detection
 }
}


G
Guest 8 months ago

I tried, but this time the home page was not loaded at all. If we call this template directly without using open Id, there is no problem, it works with the menu link, but when I use openId conncet, the menu links do not open or close at all, other buttons and functions do not work either.

isLoggedIn(): boolean {
return this.oauthService.hasValidAccessToken();
}

login() {
if (!this.oauthService.hasValidAccessToken()) {
// EÄŸer geçerli bir eriÅŸim belirteci yoksa, kimlik doÄŸrulama akışını baÅŸlat

this.oauthService.initImplicitFlow();


} else {
// EÄŸer geçerli bir eriÅŸim belirteci varsa, kullanıcıyı belirlediÄŸiniz sayfaya yönlendir
/* this.router.navigate(['/']);*/
// Sayfayı yenile

}
}

logout(): void {
if (this.oauthService.hasValidAccessToken()) {
this.oauthService.logOut();
localStorage.removeItem('accessToken');
this.router.navigate(['/']); // BaÅŸlangıç sayfasına yönlendir
}

// Oturumu kapat ve kullanıcıyı baÅŸlangıç sayfasına yönlendir

} app.component.ts

{
path: 'home',
component:HomeComponent
},
{
path: "table",
component:TableComponent
},
{
path: "list",
component:ListComponent
},

{ path: 'firmadetail/:firmaKodu', component: FirmaComponent },
{
path: 'list/firmadetail/:firmaKodu',
component:FirmaComponent
},
{
path: 'onay',
component:ApprovalComponent
},

{ path: 'firmdetail/:firmaKodu', component: FirmEditComponent },
]; routing




<div *ngIf="!isLoggedIn()">
<h1>HoÅŸ Geldiniz!</h1>
<p>Burada oturum açabilirsiniz.</p>
<button (click)="login()">Oturum Aç</button>

</div>
<div *ngIf="isLoggedIn()">
<app-home></app-home>


</div>


app.component.html


<app-business-partners-administrator></app-business-partners-administrator> home.componnet.html


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(